list of links look like accordion using JQuery

Mon Jan 07, 2013 5:56 pm

accordion layout using JQuery
javascript code

<html>
<head>
<title>list of links look like accordion  using JQuery</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<style type="text/css">
.active
{
background:#F25201;
width:50;
}
.details
{
 background:#FFFFFF;
 
}
</style>
<script >
$(document).ready(function(){
 
  
    var $container = $('#accordion');
 
   // $container.find('li:not(:first) .details').hide();
	
    $container.find('li:first').addClass('active');
	// When use click on link inside li tag
    $container.on('click','li a',function(e){
    e.preventDefault();
	 
    var $this = $(this).parents('li');
    if($this.hasClass('active')){
    if($this.find('.details').is(':visible')) {
    $this.find('.details').slideUp(2000);
	 
    } else {
	 
    $this.find('.details').slideDown(2000);
    }
    } else {
	 
    $container.find('li.active .details').slideUp(2000);
    $container.find('li').removeClass('active');
    $this.addClass('active');
    $this.find('.details').slideDown(2000);
    }
    });
	 
	
	    
	
	
});
</script>
</head>
<body>
<ol id="accordion">
<li class="first"><a href=#>Show-Hide</a><div class="details">Details1</div></li>
<li class="active"><a href=#>Show-Hide</a><div class="details" style="display:none"  >Details2</div></li>
<li   ><a href=#>Two</a></li>
<li  class=" active"   ><a href=#>Show-Hide</a><div class="details">Details3</div></li>
<li class="active"><a href=#>Show-Hide</a><div class="details">Details4</div></li>
<li  ><a href=#>Five</a><div class="details"  >Details5</div></li>
<li class="active"><a href=#>Show-Hide</a><div class="details" style="display:none">Details6</div></li>
</ol>

 
<div id="div1"></div>
</body>
</html>

list of links look like accordion using JQuery

list of links look like accordion using JQuery

Topic Tags