How do I apply jQuery's slideToggle() to $(this) and do the opposite to all other elements?

Question

What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.

*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink , and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.

Here's some sample html code:

<style>
.collapsible_list {
  display: none;
}
.collapsible_list.active {
  display: block;
}
</style>

<div id="sidebar">
  <div class="tab_box">
    <div class="collapsible_tab"><a href="#" class="btn-slide-2014">2014</a></div>
    <div class="collapsible_list panel-2014">
        <a href="/2014/1">1</a>
        <a href="/2014/2">2</a>
        <a href="/2014/3">3</a>
    </div>
  </div>
  <div class="tab_box">
    <div class="collapsible_tab"><a href="#" class="btn-slide-2013">2013</a></div>
    <div class="collapsible_list panel-2013">
        <a class="activelink" href="/2013/1">1</a>
        <a href="/2013/2">2</a>
        <a href="/2013/3">3</a>
    </div>
  </div>
</div>

And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):

$(document).ready(function() {
  // This looks redundant to me but I'm not sure how else to go about it.
  $(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
  $(".tab_box").click(function() {
    $(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
      $(".collapsible_list.active:not(this)").each(function() {
        $(this).slideToggle("slow");
      });
    });
  });
});

I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.

Answer 1

Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector

jQuery(function ($) {
    // This looks redundant to me but I'm not sure how else to go about it.
    $(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
    $(".tab_box").click(function () {
        var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
        //slidup others
        $(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
    });
});

Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously

Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)

Answer 2

Try This.

$('.collapsible_tab a').on('click', function(e){
    e.preventDefault();
    $('.collapsible_list').removeClass('active')
    $(this).parent().next('.collapsible_list').toggleClass('active');
});

Fiddle Demo

Answer 3

I think your code would be less complicated if you simply remembered the previously opened list:

jQuery(function($) {
    // remember current list and make it visible
    var $current = $('.collapsible_list:has(.activelink)').show(); 

    $(".tab_box").on('click', function() {
        var $previous = $current;

        // open new list
        $current = $('.collapsible_list', this)
            .slideToggle("slow", function() {
                // and slide out the previous
                $previous.slideToggle('slow');
            });
    });
});

Demo