如何使jquery与slidetoggle？

Question

I am trying to use slide-toggle effect of j-query but getting issue with HTML i have . Please take a look -:

        <li class="active Sub-Tag">Pork Ham</li>                                
        <li class="active-in active"><a onclick="call_content(146);" href="#">&gt; Double Smoked Ham</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(147);" href="#">&gt; Prime Ham</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(148);" href="#">&gt; Smoked Ham</a></li>  

        <li class="active Sub-Tag">Pork Lyoner</li>                             
        <li class="active-in active"><a onclick="call_content(149);" href="#">&gt; Pork Olive Lyoner</a></li>                                                           
        <li class="active-in active"><a onclick="call_content(150);" href="#">&gt; Pork Paprica Lyoner</a></li>                                                         
        <li class="active-in active"><a onclick="call_content(151);" href="#">&gt; Pork Pepper Lyoner</a></li>                                                          
        <li class="active-in active"><a onclick="call_content(152);" href="#">&gt; Pork Pista Lyoner</a></li>       

        <li class="active Sub-Tag">Pepperoni</li>                               
        <li class="active-in active"><a onclick="call_content(153);" href="#">&gt; Pork Pepperoni</a></li>   

I want to show the toggle effect on Pork Ham , Pork Lyoner , Pepperoni.

Advise me how to do without changing the html and classes.

Answer 1

This is how I did it:

$('.Sub-Tag').click(function(){
    var current = $(this);

    while(current.next().hasClass('active-in') != false){
        current = current.next();
        current.slideToggle();
    }
});

JSFiddle demo here

Answer 2

You can try slideToggle better than toggle:

$('.active.Sub-Tag').slideToggle(timeout);

You also need to edit html, because slidetoggle works maximizing height of an element. For example:

<div class="slided">A long content here....</div>
<button id="button">Click</button>
<style> .slided {display:none;}</style>
<script>
$('#button').on('click', function() {
    $('.slided').slideToggle(300);
});
</script>

You can see this code working on this fiddle:

https://jsfiddle.net/y8sqm7ww/