Question

I am using JQuery 1.3.2 and UI version 1.7, and Drupal 6.15

I would like to make an accordion using HTML output from Views modual. I modified the .tpl.php file to output the usable <h2></h2><div></div>,<h2></h2><div></div>... format. However, the Views module wraps the output in another <div>, looking like this:

    <div class="views-row views-row-1 views-row-odd views-row-first">

        <h2>...</h2>

        <div class="content clearfix">...</div>

   </div>
   <div class="views-row views-row-2 views-row-even">

        <h2>...</h2>

        <div class="content clearfix">...</div>

   </div>

So basically, the tags I want are wrapped in a problematic <div>.

I thought about the JQuery 1.4 method element.unwrap(), but 1.4 causes problems with Drupal 6.15 (failed AJAX calls). Views does not provide any useful variables besides $rows that contains the entire HTML output

Answer 1

The extra div shouldn’t cause a problem (unless CSS is messing it up), just initialize it a little different:

$("#container_id").accordion({ header: '> div > h2'});

(Where #container is the div that wraps both your code and the extra parent divs)

Please see this example I put together showing it works as expected. You can view the source for the example here.