Question

I am trying to show and hide (toggle) an <ol> when a click a link using JQuery.
My HTML is

 <ol id="sortable" class="sortable">
    <li>
       <div>
          <span class="drag-image groupimage">&nbsp;</span>
          <a class='expand'>{{ portfolio_group.name }}</a>
       </div>
     <ol style="display: none; margin:0px" id={{ portfolio_group.id }}>
         <li>
            <div class="patent-div">
               <span style="" class="drag-image patentimage">&nbsp;</span>
               <a class="patent-name" href='{{ path('v2_pm_patents_edit', { 'patentId': patent.id }) }}'>{{ patent.patentName }}</a>
            </div>
     </ol>
 </ol>

As the inner ol is hidden and I want to make it toggle when I click on the link with class = expand.

What I tried so far

 $(document).ready(function(){
    $('.expand').click(function() {
        $(this).nextAll('ol').eq(0).slideToggle('fast');
    });

});

But its not working
Any ideas?

Thanks

Answer 1

The .nextAll() function looks at siblings of the element(s) in the jQuery object it’s called on. However, the <ol> you want to toggle doesn’t look like it’s a sibling of the <a> element that’s triggering the click event, but instead is a sibling of the <div> element that contains the <a>.

You can traverse up the DOM to the parent <div> using the .parent() function, then call .nextAll():

$(this).parent().nextAll('ol').eq(0).slideToggle('fast');