accordion effect
Th开发者_运维技巧ere are so many 'huge' accordion scripts around and I am confused.
Can anyone suggest me a simple code to turn this list into a accordion panel. To start with, only the 'Sports' list will be visible. Then when the user clicks on either Technology or Latest, the Sports will hide and the one clicked will show up and so on..
<ul id="accordion">
<li>Sports</li>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
<li>Technology</li>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<li>Latest</li>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</ul>
For something quick and simple you can use slideToggle() or slideUp() slideDown()
You might want to clean up your HTML so that the ULs are properly nested:
<ul id="accordion">
<li>
<h1>Sports</h1>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
</li>
<li>
<h1>Technology</h1>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li>
<h1>Latest</h1>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</li>
</ul>
Then you could do something like this:
$(document).ready(function() {
// initialise
$('ul#accordion > li > ul').hide();
$('ul#accordion > li:first-child > ul').show();
// accordion
$('ul#accordion > li > h1').click(function() {
if($(this).next().css('display') == 'none') {
$('ul#accordion > li > ul').slideUp();
$(this).next().slideDown();
}
});
});
The jquery UI package comes with accordion functionality, if you're up to using that (UI is a pretty standard library for jquery, if a bit heavy-handed for some needs).
This answer uses the OP's original data and fulfills his request for the first title to be open at the start (see notes in code below). See fiddle here: jQuery-ui accordion example on JSFiddle
I used the example from here: jQuery-ui accordion docs
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
clearstyle: true,
collapsible: true, //allow accordion to be completely collapsed showing only the headers.
active: 0 //open first accordion (Sports) on load
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Sports</a></h3>
<div>
<ul>
<li>Golf</li>
<li>Cricket</li>
<li>Football</li>
</ul>
</div>
<h3><a href="#">Techology</a></h3>
<div>
<ul>
<li>iPhone</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
<h3><a href="#">Latest</a></h3>
<div>
<ul>
<li>Obama</li>
<li>Iran Election</li>
<li>Health Care</li>
</ul>
</div>
<h3><a href="#">Attribution</a></h3>
<div>
<p><a href="http://stackoverflow.com/questions/2657469/accordion-effect">In answer to Stack Overflow question 2657469</a></p>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论