Question

I downloaded a jquery collapsible panel script (used as a menu), which I’ve got working fine, however I am using it in conjunction with .NET and trying to have a certain panel based on the page you are viewing to expand it’s panel, however I can’t seem to select the thing no matter all the combinations I have tried. Here is what the HTML looks like:

<div class="collapsibleContainer app ui-widget" title="1990">
   <div class="collapsibleContainerTitle app ui-widget-header">
      <div>▸1990</div>
   </div>
   <div class="collapsibleContainerContent app ui-widget-content" style="display: none; "> 
        Text Stuff
   </div>
</div>

Now on this script after I run the initial stuff, writing this line will successfully toggle all the panels:

$(".collapsibleContainerContent").slideToggle();

However, of course because there are multiples of these panels on a page, I don’t want them all toggled, just the one that is relevant to the specific page I am viewing. I tried this like so:

$(".collapsibleContainerTitle.app.ui-widget-header:contains('<%= Decade %>')").parent().slideToggle();
$(".collapsibleContainer.app.ui-widget-header[title='<%= Decade %>'] > .collapsibleContainerContent").slideToggle();

Among a slew of other combinations. I never had to use selectors this complex before (at least for complex for me). How can I do? I need to select the .collapsibleContainerContent and slideToggle() it that is within the appropriate decade container.

I have confirmed that the .net variable being passed to the script is correct, when viewing the source it does say 1990. So what am I doing wrong? Thanks.

Edit: Clarification, the year is dynamic and that is what I have to match my data, so I need will be starting at least with the base select of either the Container by attribute title or ContainerTitle by :contains with the year, but I need to end with the ContainerContent selection so I can toggle it.

Answer 1

$(".collapsibleContainerTitle.app.ui-widget-header:contains('<%= NoteDecade %>')").parent().children(".collapsibleContainerContent").slideToggle();

Did the trick.