Here is the demo for the JQuery UI's accordion widget. I have one on my page, and the way to put items in it (as shown on the demo page) is like so:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</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>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
Notice how for every item, there is the following structure: <h3>Title</h3><div><p>Text</p></div>
. I would like to be able to dynamically add to this accordion; however, when I tried to simply add that structure to the accordion it didn't work. I looked into my chrome console, and saw that JQuery adds all sorts of classes and properties to the bare-looking elements of the item. Now, of course the obvious way to solve this is instead of adding <h3>Title</h3>
to add
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-lessonlist-header-0" aria-controls="ui-accordion-lessonlist-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Title</h3>
And likewise for every other element. I know that this should work fine, but it looks ugly and I was wondering if JQuery has provided us with some nice function to do all this stuff for us. If it hasn't, can anyone suggest a less annoying way to do this?
EDIT: in response to all the answers suggesting to recreate the accordion: I know that that is probably a better idea than the method shown above, but is it possible to "accordion" only the block of HTML that I need as opposed to the whole accordion, which can get quite big?
在向其中添加新数据时,只需重新创建手风琴即可:
$("#accordion").append(html).accordion('destroy').accordion();
The only critical HTML is the main structure:
<div id="accordion">
<h3>Section 1</h3>
<div></div>
<h3>Section 2</h3>
<div></div>
</div>
You can put anything you want inside the DIV
content panels.
WHen you add aa new set of h3
and div
, destroy and recreate the accordion:
var newPanel='<h3>New section</h3><div>New content</div>';
$('#accordion').append(newPanel).accordion('destroy').accordion( /* options */ );
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.