Super simple accordion effect making

The end result of the accordion is as follows:

To achieve the above effect is very simple, no plug-in

Step.1

HTML Structure creation

<DivID= "Firstpane"class= "Menu_list">         <Pclass= "Menu_head">Header-1</P>        <Divclass= "Menu_body">        <ahref="#">Link-1</a>         <ahref="#">Link-2</a>         <ahref="#">Link-3</a>            </Div>        <Pclass= "Menu_head">Header-2</P>        <Divclass= "Menu_body">            <ahref="#">Link-1</a>         <ahref="#">Link-2</a>         <ahref="#">Link-3</a>            </Div>        <Pclass= "Menu_head">Header-3</P>        <Divclass= "Menu_body">          <ahref="#">Link-1</a>         <ahref="#">Link-2</a>         <ahref="#">Link-3</a>                   </Div>  </Div> 

First look at the results:

Step.2

To add a style to the above HTML, the default is to see only the header of each group, the content in each group is hidden by default.

. Menu_list{width:150px;}. Menu_head{padding:5px 10px;cursor:Pointer;position:relative;margin:1px;Font-weight:Bold;background:#eef4d3 URL (left.png) center right no-repeat;}. Menu_body{Display:None;}. Menu_body a{Display:Block;Color:#006699;Background-color:#EFEFEF;Padding-left:10px;Font-weight:Bold;text-decoration:None;}. Menu_body a:hover{Color:#000000;text-decoration:Underline; }

Step.3

Based on the jquery library, write JS to make the list move.

The requirement should be that when we click on the header, the body underneath her should be displayed, and the other menu groups will be closed.

$ ("#firstpane p.menu_head"). Click (function()    {        $ (this). css ({backgroundimage: "URL (down.png)"}). Next ("Div.menu_body"). Slidetoggle ("Div.menu_body"). Slideup (           "slow"). $ (this). Siblings (). css ({backgroundimage: "url (left.png)});    });

At this point, the Accordion effect menu is complete!

Super simple accordion effect making