Drop down description box

by Dan Wright

HTML

<body>
    <div>Sample Box with drop down menu</div>
    <div id="container"> <a href="#" id="title">
                <span>Item Menu</span>
            </a>
    </div>
        <div id="options">
            <ul>
                <li><a href="#">Item1</a>

                </li>
                <li><a href="#">Item2</a>

                </li>
                <li><a href="#">Item3</a>

                </li>
                <li><a href="#">Item4</a>

                </li>
            </ul>
        </div>
    
</body>

CSS

/* 
    Created on : 28-Jan-2014, 10:25:21
    Author     : danielW
*/
#container{
    position:relative;
    width:300px;
    height:150px;
    background-image: url(img/pic1.jpg);
    padding-bottom: 0px;
}
#title{
    position:absolute;
    bottom:0px;
    width:300px;
    height:35px;
    background-color:rgba(255,0,0,0.5);
}
span{
    font-family: serif;
    font-size: 30px;
}
a {
    text-decoration: none; 
}
#options{
    position:inherit;
    display:none;
    background-color:rgba(255,0,0,0.5);
    width:300px;
    padding-top: 0px;
}
#options ul{
    padding:0px; 
    margin:0px;
}
#options li{
    list-style-type: none;  
    margin-left:25px;
}

JavaScript

$(document).ready(function () {
    displayOptions();
});

function displayOptions() {

    $('#title').click(function (e) {

        if ($('#options').is(':hidden')) {
            alert('hidden');
            $('#options').slideDown('fast');
            $('#options').show('li');
        } else {
            $('#options').slideUp('fast');
            alert('visible');
        }
        e.preventDefault();
    });
}