Question

I currently have the following html:

<h3 />
<p />
<p />
<ul />
<ol />

<h3 />
<p />
<p />
<ul />
<ol />

<h3 />
<p />
<p />
<ul />
<ol />

I’d like to create an accordion but for this I need the following:

<h3 />
<div>
     <p />
     <p />
     <ul />
     <ol />
</div>

<h3 />
<div>
     <p />
     <p />
     <ul />
     <ol />
</div>

I have tried the following, but it doesn’t work:

$('.page2 .articleText p, .page2 .articleText ul').after('<div class="accordion">');
$('.page2 .articleText h4:not(:first)').before('</div>');

Any help is much appreciated.

Thanks!

Answer 1

You can use .nextUntil() and .wrapAll() to select and wrap each section, like this:

$("h3").each(function() {
    $(this).nextUntil("h3").wrapAll("<div />");
});​

You can see a working demo here