CODEWITHSUNDEEP
javascriptjqueryslidetoggle
7ch5
7ch5

Reputation: 131

More efficient collapsable list targeting

I'm trying to figure out if there's a way to use jquery's slideDown/slideUp/slideToggle functions to animate these collapsable elements when I click on them. Here's a snippet of the html layout of the elements: 

<ul> 
                    <li class="category1"><a href="#"></a></li>
                        <ul>
                            <div class="tag1">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>

                        </ul>
                    <li class="category2"><a href="#"></a></li>
                        <ul>
                            <div class="tag2">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>
                    <li class="category3"><a href="#"></a></li>
                        <ul>
                            <div class="tag3">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>

</ul>

Here's the javascript code that I've tried. It works, but it is very long. I am wondering if there is a more efficient way to accomplish the same thing. 

$('.category1').click(function(){
    $('.tag1').slideToggle('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category2').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideToggle('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category3').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideToggle('200');
        return false;
});

Upvotes: 1

Views: 155

Answers (2)

John Kalberer
John Kalberer

Reputation: 5790

Well I am pretty sure your markup is invalid as only li elements should be nested in ul elements (someone correct me if I am wrong). I changed the markup to this:

<ul class="outer"> 
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat4"><a href="#">derp</a></li>    
        </ul>
    </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Here is the script:

$(".outer > li > a").on("click", function(event) {
    event.preventDefault();
    $(".outer ul").slideUp();   
    var next = $(this).next();
    if(next.is(":visible")) { return; }         
    next.slideDown();
});​

And here is the working example.

As you can see, I simply slide up all the ul sections and then slide down the next one after the anchor which has been clicked.

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50777

You need to restructure your list a little bit, you want to keep the children <ul> within the parent <li>

$('li[class^=category]').click(function(){
  var cls = $(this).attr('class');
  cls = cls.split('y');
  cls = cls[1];
  $('.tag'+cls).slideToggle('200');          
  $('div[class^=tag]').not("div[class=tag"+cls+"]").slideUp('200');
  return false;
});

Upvotes: 0

Related Questions