Total members 11889 |It is currently Thu Mar 28, 2024 1:17 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  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)     -  
 Code to open multiple links.     -  
 Post offers not website links .     -  
 background-image Anchor in header links     -  
 Working with menus, Label links and files in C#     -  



Topic Tags

JQuery Slide
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com