Simple Accordian List using jQuery, HTML and CSS

Home » JQuery » jQuery Methods » Simple Accordian List using jQuery, HTML and CSS

Simple Accordian List using jQuery, HTML and CSS

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

We can create a simple Accordian List using jQuery, HTML and CSS.

HTML :- HTML provides the structure.

CSS :- CSS gives the desired look and helps HTML to maintain structure.

jQuery :- jQuery adds the animation affect. jQuery makes the user experience amazing.

Code :

<html>
<head>
<title>Accordian List in Jquery
</title>
<style type="text/css">
#mainList li
{
float:left;
List-style:none;
margin-left:50px;
font-family:comic sans ms;
width:80px;
}
#innerList li
{
float:none;
List-style:none;
margin-left:-40px;
margin-top:20px;
display:none;
width:80px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#mainList > li").hover(function () {
            $(this).find("li").slideDown("fast");
        }, function () {
            $(this).find("li").slideUp("fast");
        });
    });
</script>
</head>
<body>
<ul id="mainList">
<li>Home</li>
<li>HTML
<ul class="innerList">
<li>Tags</li>
<li>Examples</li>
<li>Demos</li>
</ul>
</li>
<li>jQuery
<ul class="innerList">
<li>Methods</li>
<li>Selectors</li>
<li>Demos</li>
</ul>
</li>
<li>CSS</li>
<li>XML
<ul class="innerList">
<li>XSD</li>
<li>XSLT</li>
<li>DTD</li>
</ul>
</li>
</ul>
</body>
</html>

Demo :