Slidetoggle with multiple divs

Question

I'm struggling to make a replica of the effect seen here: https://tu-dresden.de/if you click on Language, Search, Internal and the navigation in the blue header.

I have managed to create this: https://jsfiddle.net/06tfufo6/2/ I would like to keep the slideToggle effect upon clicking and somehow slideToggle each element inside.

Upon clicking the same/active button it should all close. I can't seem to wrap my head around how this can be done.

Thank you

jQuery('.container-box, .slideout-container').hide();
jQuery('.btn-group a').on('click', function() {

  var target = "#" + jQuery(this).data("target");

  jQuery('.slideout-container').slideToggle();
  jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
  jQuery(target).show().attr('aria-expanded', 'true');


});

.btn-group {
  background-color: #002557;
}

a {
  color: #fff;
  padding: 10px 20px;
}

.slideout-container {
  padding: 25px 0;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <a href="#" class="btn blue" data-target="language" aria-expanded="false">Show language</a>
  <a href="#" class="btn blue" data-target="top_search" aria-expanded="false">Show search</a>
  <a href="#" class="btn blue" data-target="navigation" aria-expanded="false">Search navigation</a>
</div>

<div class="slideout-container">
  <section id="top_search" class="container-box" aria-expanded="false">
    Section search
  </section>

  <section id="language" class="container-box" aria-expanded="false">
    Section language
  </section>

  <section id="navigation" class="main-navigation container-box" role="navigation" aria-expanded="false">
    Navigation
  </section>
</div>

Answer 1

Store the current content in a variable and compare each time is clicked to slide down and up the content, would be something like this:

 jQuery('.container-box, .slideout-container').hide();
 var current_page,
     target = '';
 jQuery('.btn-group a').on('click', function () {
        var target = "#" + jQuery(this).data("target");

        if(current_page === target){
            jQuery('.slideout-container').slideUp();
            current_page = '';
        }else{
            jQuery('.slideout-container').slideDown();
            current_page = target;
        }
        jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
        jQuery(target).show().attr('aria-expanded', 'true');


    });

here is working: https://jsfiddle.net/06tfufo6/8/

Answer 2

For the functionality you described, you need to be able to keep track of the initiating element, and then only call your toggle code when the instigating element is clicked (assuming I understood what you were going for). The code below does just that.

You're going to need to tweak the aria-expanded true/false portion of your code, but this should get you going.

   jQuery('.container-box, .slideout-container').hide();
   jQuery('.btn-group a').on('click', function() {
     var target = "#" + jQuery(this).data("target");
     let $target = jQuery(this);

     // If no other elements have instigator class, add to target
     if (!jQuery(".btn-group a.instigator").length) {
       $target.addClass("instigator");
     }

     if ($target.hasClass("instigator")) {
       jQuery('.slideout-container').slideToggle();
       jQuery(target).show().attr('aria-expanded', 'true');
     } else {
       jQuery('.container-box').not(target).hide().attr('aria-expanded', 'false');
       jQuery(target).show().attr('aria-expanded', 'true');
     }

   });

Here's a working fiddle.