Simple Accordian Example

You want to create an simple accordian?, just 3 lines code in JQuery. Below is the code, check it out:

HTML Structure

<div class="acoordian example1">
                <p>Example 1</p>
                <h3>abc</h3>
                <div class="accordContent"><p>Accordian Example<p></div>
               
                <h3>abc</h3>
                <div class="accordContent"><p>Accordian Example<p></div>

</div>

CSS Structure

*{padding:0;margin:0}
.acoordian{width:350px;padding:20px 0 0 20px;}
.acoordian h3{font-size:14px;color:#0000ff;width:350px;cursor:pointer;display:inline-block;border:1px
solid #ccc;}
.acoordian .accordContent{border:1px solid #666;width:340px;padding:5px;display:none;float:left}   

Jquery Code:

$(document).ready(function(){
                /*Simple Accordian onclick the content slides down*/
                $(".example1 h3").click(function(){
                    $(this).next().slideToggle();
                });

                /*OR*/

                /*Simple Accordian onclick the content slides down with siblings sliding up*/

               $(".example1 h3").click(function(){
                    $(this).next().slideDown().siblings('.accordContent').slideUp();
                });
});

See its simple!!!. Why to include the plugins which will increase load time :)

Here you can view the demo