javascript - Hide divs when another div is expanded? -

i have 8 divs on page. 4 @ top , 4 @ bottom. 4 divs @ top have piece of javascript code expands/unhides div below them (see jsfiddle). make when these divs expanded 4 divs @ bottom of page hide. then, when div unexpanded, 4 divs @ bottom of page show again.

please see jsfiddle: https://jsfiddle.net/44478c41/

i don't have knowledge of javascript had fiddle around existing code try , work, managed hide div not content within div, nor able unhide again. here edited code to:

    $(document).ready(function() {     var $cont;         function tgl_conts(){         $('.static').stop().animate({height: 0},1200);         $cont.stop().animate({height:210},1200);     }      $('.tab_collapsable').on('click',function(){         var tabclass=$(this).attr('class').split(' ')[1];         $cont = $('.'+tabclass+':not(.tab_collapsable)');         var h = ($cont.height() === 0) ? tgl_conts() :  ( $cont.stop().animate({height: 0},1200) );       });      }); 

thanks lot!

yet solution:

$('.tab_collapsable').on('click',function(){     var tabclass = $(this).attr('class').split(' ')[1];     var h = $('.content.'+tabclass).height() ? 0 : 210;      $('.content').stop().animate({height: h},1200)     .not('.'+tabclass).stop().animate({height: 0},1200);      $('.static').stop().animate({height: h ? 0 : 250},1200); }); 

jsfiddle