Slidetoggle with multiple divs

Question

I am trying to make a replica of the effect seen here: https://tu-dresden.de/if you click on the language, search, internal and navigation in the blue header.

I managed to create this: https://jsfiddle.net/06tfufo6/2/ I would like the slideToggle effect to be pressed and somehow slide through all the elements inside.

When you press the same / active button, everything should be closed. It seems I can’t plunge into my head how this can be done.

thank

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>

Run code

Answer 1

Save the current contents in a variable and each time click on the slide down and up the contents, there will 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');


    });

: https://jsfiddle.net/06tfufo6/8/

Answer 2

, , ( , , ). .

aria-expanded true/false , .

   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');
     }

   });

.