make a slideDown and slideUp on multiple elements but at the click of only one specific

Question

i have this html code

    <div class="toolsLink">
        <h1>title</h1>
        <img class="downArrow" src="arrow.png alt="arrow_logo">
    </div>
    <ul>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
    </ul>
    <div class="toolsLink">
        <h1>title</h1>
        <img class="downArrow" src="arrow.png alt="arrow_logo">
    </div>
    <ul>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
    </ul> <!-- and many others the same -->

then I have this javascript

 $(document).ready(function () {
   $('.downArrow').click(function () {
     $(this).parent().siblings('ul').slideToggle();
   });

 });

It works but if I click on any ''.downArrow ". I want that if it should only work on the clicked ''.downArrow ". That is, for that clicked ".downArrow", he must slide that togle of that ul below him and not for everyone.

Answer 1

Looking at your HTML structure, you can use the parent() and next() jQuery function to target the UL.

What you were doing in your code is: go to parent (the div) then get ALL siblings UL.

What you need is:

• Go to parent,
• Then, take the closest UL (next in your case)

 $(document).ready(function () { $('.downArrow').click(function () { $(this).parent().next().slideToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <.-- and many others the same --> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <.-- and many others the same --> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <!-- and many others the same --> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <!-- and many others the same --> <div class="toolsLink"> <h1>title</h1> <img class="downArrow" src="arrow.png" alt="arrow_logo"> </div> <ul> <li>prova</li> <li>prova</li> <li>prova</li> <li>prova</li> </ul> <!-- and many others the same -->

Answer 2

It's because when you are calling parent() both uls are considered its siblings. You could use the .first() method to get the first instance of a ul that the selector encounters. So your slideToggle method would look like $(this).parent().siblings('ul').first().slideToggle();