Switch to full style
JQuery Examples
Post a reply

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>




Post a reply
  Related Posts  to : list of links look like accordion using JQuery
 accordion using JQuery     -  
 Links like yours?     -  
 links CSS properties     -  
 Many links for the one image     -  
 Example of using access key with links     -  
 How to add links in header ? (mile100style)     -  
 Post offers not website links .     -  
 Code to open multiple links.     -  
 background-image Anchor in header links     -  
 Working with menus, Label links and files in C#     -  

Topic Tags

JQuery Slide