In this tutorial I will show you that how can we create simple but fancy JQuery Accordion.
Lets Make HTML first for Accordian
<ul class="accordion" id="accordion"> <li> <div class="heading">Accordion Tab 1</div> <div class="description"> <p>Content of Tab 1 Comes Here</p> </div> </li> <li> <div class="heading">Accordion Tab 2</div> <div class="description"> <p>Content of Tab 2 Comes Here</p> </div> </li> <li> <div class="heading">Accordion Tab 3</div> <div class="description"> <p>Content of Tab 3 Comes Here</p> </div> </li> <li> <div class="heading">Accordion Tab 4</div> <div class="description"> <p>Content of Tab 4 Comes Here</p> </div> </li> <li> <div class="heading">Accordion Tab 5</div> <div class="description"> <p>Content of Tab 5 Comes Here</p> </div> </li> </ul>
Bellow is the CSS which i have used
ul.accordion{ list-style:none; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; } ul.accordion li{ width:500px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:0 2px 5px #555555; -webkit-box-shadow:0 2px 5px #555555; box-shadow:0 2px 5px #555555; } ul.accordion li.bleft{ border-left:2px solid #fff; } ul.accordion li .heading{ background-color:#fff; padding:10px; opacity:0.9; text-transform:uppercase; font-style:normal; letter-spacing:1px; font-size:14px; color:#444; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description{ bottom:0px; left:0px; display:none; } ul.accordion li .description h2{ text-transform:uppercase; font-style:normal; font-weight:bold; letter-spacing:1px; font-size:45px; color:#444; text-align:left; margin:0px 0px 15px 20px; text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{ line-height:14px; margin:5px 5px; font-family: "Trebuchet MS", sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; line-height: 1.6em; } ul.accordion li .description a{ position:absolute; bottom:5px; left:20px; text-transform:uppercase; font-style:normal; font-size:11px; text-decoration:none; color:#888; } ul.accordion li .description a:hover{ color:#333; text-decoration:underline; }
Now last & most Important thing , Jquery for this accordion to work is bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#accordion > li').hover( function () { var $this = $(this); $this.stop().animate({ 'height': '130px' }, 500); $('.bgDescription', $this).stop(true, true).slideDown(500); $('.description', $this).stop(true, true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({ 'height': '40px' }, 1000); $('.heading', $this).stop(true, true).fadeIn(); $('.description', $this).stop(true, true).fadeOut(500); $('.bgDescription', $this).stop(true, true).slideUp(700); } ); }); </script>
Bellow is working example
Click here to see Demo