TOGGLE - Menu & Submenu Options In Contained Space Like SIdebar

by bizamajig

HTML

<div id="cat_icon">Menu</div>
<div id="categories">
    <div CLASS="panel_title">Categories</div>
    <div CLASS="panel_item">Entry 1</div>
    <div CLASS="panel_item">Entry 2</div>
    <div CLASS="panel_item">Entry 3</div>
    <div CLASS="panel_item">Entry 4</div>
</div>

CSS

#categories {
    display: none;
}

JavaScript

var duration = 'slow';

$('#cat_icon').click(function () {
    $('#cat_icon').hide(duration, function() {
        $('#categories').show('slide', {direction: 'left'}, duration);});
});
$('.panel_title').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});