html
    ----------
    <div id="outer">
    <h2>Play List</h2>
        <ul>
            <li><ahref="javascript:">First Choice</a></li>
            <li><ahref="javascript:">Second Choice</a></li>
            <li><ahref="javascript:">Third Choice</a></li>
            <li><ahref="javascript:">Fourth Choice</a></li>
            <li><ahref="javascript:">Fifth Choice</a></li>
            <li><ahref="javascript:">Sixth Choice</a></li>
        </ul>
    </div>

    css
    ----------
    body,div,ul,li,h2{margin:0;padding:0;}
    li{list-style: none;}
    #outer{width:200px;border:1px solid #aaa;margin:10px auto;}
    h2{cursor:pointer;color:#57646E;font-size:14px;font-weight:400;border:1px
    solid;height:30px;line-height:30px;padding-left:10px;background:#ced3d7 180px 15px no-repeat;border-color:#fff
    #e9edf2;}
    li{height:35px;line-height:25px; }
    a{display:block;color:#6b7980;background:#e9edf2;text-decoration:none;padding:5px 10px;}
    a:hover{background:#fff;text-decoration:underline;}

    js
    ----------
    var oH2 = document.getElementsByTagName("h2")[0];
    var oUl = document.getElementsByTagName("ul")[0];
        // 1 //
    oH2.onclick = function () 
    {
        var style = oUl.style;
        style.display = style.display == "none" ? "block" : "none";
        oH2.className = style.display == "none" ? "open" : ""
    }
        // 2 //
    /*oH2.onclick = function()
    {
        if(oUl.style.display ==='block'){oUl.style.display = 'none'}else{oUl.style.display='block'}
    }*/