Accordian with CSS and small Jquery

Learn here how to create smooth collapsible Accordion. Simple follow below steps and implement code. We will add small jquery code for accordion smoothness. After following these steps you can find a very smooth and attractive accordion.
                              
HTML:
<ul class="accordian">
    <li>
        <a href="#">Accordian1</a>
        <div>....</div>
    </li>
    <li>
        <a href="#">Accordian2</a>
        <div>....</div>
    </li>
    <li>
        <a href="#">Accordian3</a>
        <div>....</div>
    </li>
</ul>

CSS:
<style>
   ul {padding: 0;}
   ul li {list-style-type: none;}
  .accordian li {margin-bottom: 1px;}
  .accordian a {display: block; background: #eee; color: #333; padding: 10px; text-decoration: none;}
  .accordian div {display: none; padding: 10px; border: 1px solid #eee;}
</style>

JQUERY:
<script>
$(document).ready(function(e) {
    $('.accordian a').click(function(){
        $(this).next('div').slideDown().parent('li').siblings().children('div').slideUp();
    });
});
</script>

NOTE: Jquery library should be linked inside the page.

Author : TrickyUI

Share this

Related Posts