Accordion Menu

by salitrapraveen

HTML

<div id="testnav">
<ul id='nav'>
    <li><input type="checkbox" id="tb1" value="1"/><label for="tb1">TestBed1</label>
        <ul>
            
            <li><a href="#">GateWays</a></li>
            <li><a href="#">Virtual Machines</a></li>
        </ul>
    </li>
    <li><input type="checkbox"/><a href='#'>TestBed2</a>
        <ul>
            <li><a href="#">GateWays</a></li>
            <li><a href="#">Virtual Machines</a></li>
        </ul>
    </li>
    <li><input type="checkbox"/><a href='#'>TestBed3</a>
        <ul>
            <li><a href="#">GateWays</a></li>
            <li><a href="#">Virtual Machines</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

/*
 * file: /css/style.css
 * I usually keep my css rules on one line for easier reading.
 */

/* main list style */
ul#nav { 
    list-style:none;
    padding:0; 
    margin:15px 15px 15px 0; 
    width: 280px;
}
/* heading links */
ul#nav li label {
    height: 30px; 
    line-height:30px; 
    background:#F9F9F9;
    border-bottom: 1px solid #b9b09d;
    border-top: 1px solid #C8C8C8;; 
    text-decoration:none; 
    color: #000;
}
/* heading links hover effect */
ul#nav li label:hover {
    background:#FFF;
}

/* sub heading list */
ul#nav ul {
    display: none;
    list-style-type:none; 
    padding:0; 
    margin: 0px 0px 0px 20px;
}
/* sub heading links */
ul#nav ul li a { 
    display:block; 
    height: 24px; 
    line-height:25px; 
    background:#F9F9F9; 
    text-decoration:none; 
    border-bottom: 1px solid #d7d1c6; 
    font-size:10px;
        color: #000;
}
/* sub heading links hover effect */
ul#nav ul li a:hover {
    background:#FFF;
}

JavaScript

// execute only when the whole document is ready
$(function() {
    
    // hide all sub heading lists
    //$('#testnav li ul').hide();
    
    // add a click handler to the heading links
    $('#testnav li label').click(function(){
        // if the current sub heading list is already open
        if($(this).next('ul:visible').length) {
            // close the sub heading list
            $(this).next('ul:visible').slideUp();
        } else {
            // close all open sub heading lists
            //$('#testnav li ul:visible').slideUp();
            // slide open the next list
            $(this).next('ul').slideToggle('fast');
        }
    
    // return false to stop link following the href
    return false;
    });
});