JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="group">
<div class="item 1">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="item 2">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="item 3">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="item 4">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
</div>
<div class="group">
<div class="item 5">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="item 6">
<div class="trigger"></div>
<div class="wrapper_hidden_content toggle_container">
<div class="hidden_content">
6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="item 7">
<div class="trigger"></div>
<div...
CSS
.display {
display: none;
clear: both;
background-color: white;
}
.wrapper{
width:200px;
}
.wrapper_hidden_content {
background-color: #FFFFFF;
display: none;
left: 0;
padding: 0 14px;
position: absolute;
top: 50px;
width: 95.5%;
z-index: 10000;
overflow:hidden;
}
.item{
display:block;
width:50px;
height:50px;
float:left;
margin:5px;
background-color:#999;
}
.group{
width:250px;
float:left;
background-color:blue;
position:relative;
}
.trigger{
width:50px;
height:20px;
background-color:#ccc;
}
JavaScript
// global variables
var nav = $('.group'),
navHeight = nav.height()+15,
items = $('.group .item .trigger'),
itemsSub = items.next('.toggle_container'),
itemsSubOpen = false,
speed = 400;
// global functions
var navOpen = function (thisSubmenu) {
itemsSubOpen = true;
// get height
thisSubmenu.css('height', 'auto');
var thisHeight = thisSubmenu.height();
thisSubmenu
.css('height', '0')
.animate({height: thisHeight }, speed)
.addClass('open');
nav.animate({height: thisHeight + navHeight }, speed);
};
var navClose = function () {
itemsSubOpen = false;
items.next('.open')
.animate({height: 0}, speed)
.removeClass('open');
nav.animate({height: navHeight-15 }, speed);
};
// prepare css
itemsSub.css('display', 'block');
itemsSub.css('height', '0');
// click event
items.click(function(event) {
// set local variables
var thisItem = $(this),
thisSubmenu = thisItem.next('.toggle_container');
// conditional click event handling
if ( itemsSubOpen ) {
if ( thisSubmenu.hasClass('open') ) {
// only close
navClose();
} else {
// close old, than open new
navClose();
setTimeout(function() {
navOpen(thisSubmenu);
}, speed);
}
} else {
// only open
navOpen(thisSubmenu);
}
// prevent default
event.preventDefault();
});