Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI Accordion with sections wrapped in DIVs

I've successfully implemented an accordion as outlined here, but would like to wrap each section in a div, so my structure would be as follows:

<div id="accordion">
<div class="wrap">
<h3><a href="#">Header 1</a></h3>
<div>Collapsible content 1</div>
</div><!-- end wrap -->
<div class="wrap">
<h3><a href="#">Header 2</a></h3>
<div>Collapsible content 2</div>
</div><!-- end wrap -->
<div class="wrap">
<h3><a href="#">Header 3</a></h3>
<div>Collapsible content 3</div>
</div><!-- end wrap -->
</div>

Is this possible using the accordion functionality provided in jQuery UI? As of now, if I try to build it this way, it attempts to treat the <div class="wrap"> as the section header.

like image 976
Travis Northcutt Avatar asked Oct 27 '11 22:10

Travis Northcutt


1 Answers

Changing the header option seems alright.

http://jqueryui.com/demos/accordion/#option-header

$(function() {
        $( "#accordion" ).accordion(
         { header: '> div.wrap > h3' }
        );
    });

http://jsfiddle.net/Quincy/RCXwz/

like image 111
Quincy Avatar answered Sep 20 '22 15:09

Quincy