Jquery UI accordion: not understanding how to update content
Question
I have a simple accordion with two section. Upon clicking a button, I'd like to insert some text into the section that's currently activated. My research keeps suggesting that I find the active pane using:
var active = $(".selector").accordion("option", "active");
I know that .selector is a class but where does it come from and how come I don't see it in my Chrome debugger? Why wouldn't $("#accordion").accordion be appropriate here instead?
Assuming that this is correct, how come I cannot simply append a
within the current pane?
active.append("<p>test</p>").accordion('destroy').accordion();
Full code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function () {
$("#accordion").accordion();
});
$(document).ready(function () {
$("#addBeer").click(function () {
var active = $(".selector").accordion("option", "active");
active.append("<p>test</p>").accordion('destroy').accordion();
});
});
</script>
</head>
<body>
<div>
<input id="addBeer" type="button" name="addBeer" value="Beer">
</div>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Paragraph 3
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Paragraph 4</p>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2014-04-15 15:20:28
A better way from what i wrote before.
EDITED
JSfiddle: http://jsfiddle.net/fS6zT/
$( "#insert" ).click( function() { //inserts text to active panel
var changetothis = $( "#something" ).val();
n = $("#accordion h3").index($("#accordion h3.ui-state-active"));
// alert(n); // test active number
var section = n+1;
$("#"+section).html(changetothis);
});
In the fiddle there is a commented function which contains some extra elements usable for this, but they aren't needed. The uncommented function thats shown above is all you require.
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.