Question

I am coding on top of a framework which I have no control of, so need to work around a limitation of what is being generated.

I’m trying to do a jquery UI accordion, but need the accordion to include the two elements following the header, not just one.

For example, the code being spat out is (with a bunch in the middle removed):

<h2>HEADER</h2>
<div>ITEM DESCRIPTION</div> 
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" ><label>Price:</label>
                    <div  class="amount">$97.50</div></div>

    </div>
</fieldset>

That all needs to go into the single accordion item, but at the moment the accordion uses the h2 as the header, the div with the description as the accordion content, and then the fieldset after is left outside the accordion. As I can’t control the code being generated to wrap them both in a div, is there a way to tell the accordion to use two items following the header, rather than one?

The jquery I’m using is:

$(function() {
    $( ".productindex" ).accordion({
        active: false,
        collapsible: true,
        autoHeight: true,
        header: 'li>form>h2'
    });
});

To further complicate things, some items don’t have descriptions, so if any script could accomodate the initial div before the fieldset potentially not existing, that would be great – however worst case I can just make sure every item has a description.

Thanks for any help!

Answer 1

Per my initial comment, you could grab everything that needs to be “accordion content” and wrap it all up in an appropriate element in order for the accordion function to work.

It would take knowing the surrounding structure of your HTML in order to decide the best selector to use to grab those elements. Let’s imagine that your structure somewhat resembles the demo on the jQuery UI site, except with your unchangeable markup instead of a div:

<h2>HEADER</h2>
<div>ITEM DESCRIPTION</div> 
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$97.50</div>
        </div>
    </div>
</fieldset>

<h2>HEADER</h2>
// whoops, no description!
<fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$105.50</div>
        </div>
    </div>
</fieldset>

We can use the h2 nodes as our entry points for selection. What you really want to do is select everything available until the next h2 (it will also end when there are no more h2 in that branch of the DOM tree). By the very nature of this kind of selection, it won’t matter if you have item descriptions, or other elements. Then we add a new wrapper around ALL found elements.

I don’t know if this is the most well-factored code (people don’t generally like using .each() but I find it handy here), but here’s what I came up with:

var headers = $('h2');
headers.each( function() {
  var toWrap = $(this).nextUntil('h2');
  toWrap.wrapAll('<div class="wrapped" />');
});

Judging from the jQuery UI documentation, you don’t need any class on the wrapping div, I just included one to facilitate this jsFiddle demonstration:

demo: http://jsfiddle.net/StUWc/1/

Just for the sake of being thorough, after the wrapAll function, your DOM becomes something that could be represented by this markup:

<h2>HEADER</h2>
<div class="wrapped">
  <fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$97.50</div>
        </div>
    </div>
  </fieldset>
</div>

<h2>HEADER</h2>
<div class="wrapped">
  <fieldset>
    <legend>Prices</legend>
    <div class="prices">
        <div class="productline" >
            <label>Price:</label>
               <div  class="amount">$105.50</div>
        </div>
    </div>
  </fieldset>
</div>