jQuery UI accordion on an ordered list
Question
I am trying to incorporate some jQuery UI components into my company's html output for user documentation. I have very little experience with javascript. I got accordion to work for table rows but now I want to expand and collapse substeps under a step so an ordered list inside an ordered list but cannot seem to get it to work. Sorry if the answer is simple but PLEASE HELP ME!!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$(".sub li:not(.accordion)").hide();
$(".sub li:first-child").show();
$(".sub li.accordion").click(function(){
$(this).nextAll("li").fadeToggle(500);
}).eq(0).trigger('click');
});
</script>
</head>
<body>
<ol class="sub">
<li class="accordion">Section 1</li>
<ol>
<li>Description</li>
<li>This is text within section 1.</li>
</ol>
<li class="accordion">Section 2</li>
<ol>
<li>Description</li>
<li>This is text within section 2.</li>
</ol>
</ol>
</body>
</html>
1 answers
solution1
0 ACCPTED 2014-02-25 00:42:21
You need to have the correct page markup in order for accordion to work: http://api.jqueryui.com/accordion/
Shortly, each sector's header should be wrapped in <h> tag and its content in a <div> , in your case:
<ol class="sub">
<li class="accordion">
<h3>Section 1</h3>
<div>
<ol>
<li>Description</li>
<li>This is text within section 1.</li>
</ol>
</div>
</li>
<li class="accordion">
<h3>Section 2</h3>
<div>
<ol>
<li>Description</li>
<li>This is text within section 2.</li>
</ol>
</div>
</li>
</ol>
And now just tell JQuery that the main <ol> is an accordion:
$(".sub").accordion()
JSFiddle here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.