There is a sign with a list of goods. I want to make a drop-down list when you click on + separately for each product. How can this be done without interfering with the html structure? The hitch is that the quantity of goods and names in it can be various without restrictions. While reveals only 1 item after the name of the goods.

  $('.plus').click(function() { $(this).parents('.order').next('.order_item').toggle(); }); 
 .order_item { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="order-count"> <tr class="order"> <td>Π’ΠΎΠ²Π°Ρ€ 1 <span class="plus">+</span> </td> </tr> <tr class="order_item"> <td>НаимСнованиС 1</td> </tr> <tr class="order_item"> <td>НаимСнованиС 2</td> </tr> <tr class="order"> <td>Π’ΠΎΠ²Π°Ρ€ 2 <span class="plus">+</span> </td> </tr> <tr class="order_item"> <td>НаимСнованиС 1</td> </tr> </table>

    1 answer 1

    You can try to implement it through

      $('.plus').click(function() { $(this).parents('.order').nextUntil(".order",'.order_item').toggle(); });

    Will reveal everything between the two .order if I'm not mistaken

    fidle

    • in principle, each not needed, you can immediately toggle call - Grundy
    • @Grundy thanks, updated - Batanichek