Toggle sub menu items with animation
HTML
<script src="//cdn.jsdelivr.net/velocity/1.2.1/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.1/velocity.ui.min.js"></script>
<button class="btn btn-xlarge hvr-float-shadow btn-primary" id="sm">Subdivision
<br>Memorial</button>
<br/>
<br/>
<center id="menu2">
<div id="div5">
dfkgdflkgndflkgnfd
<br/>
</div>
</center>
<div id="cnt"></div>
CSS
#menu2 div {
display:none;
}
JavaScript
var cnts = 0;
// an array that holds the menu state (first and secund menu)
var menuIsOpen = [false,false];
$(document).ready(function () {
$('#bc').click(function () {
toggleMenu(0);
cnts++;
$('#cnt').text(cnts);
});
$('#sm').click(function () {
toggleMenu(1);
cnts++;
$('#cnt').text(cnts);
});
});
function toggleMenu(menuNumber) {
if (menuIsOpen[menuNumber]) {
menuIsOpen[menuNumber] = false;
$('#menu'+(menuNumber +1 )+' div').velocity("transition.bounceOut", {
stagger: 100
});
} else {
menuIsOpen[menuNumber] = true;
$('#menu'+(menuNumber +1 )+' div').velocity("transition.bounceIn", {
stagger: 100
});
}
}