Making a JQuery UI accordion work without proper HTML structure (drupal)

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.

Answer 2

The other alternative is to override the views template.

1. While editing your view, click Theme: Information
2. Look at the list of template files being used
3. Open up the /sites/all/views folder and look in those templates to find out which one is sending the problematic div
4. Copy that template to your theme's directory
5. Edit whatever you need to (in this case, remove the div)
6. Flush the Drupal theme registry and the markup should be as you want it.

It's not a hack; overriding of .tpl.php's is an encouraged practice in Drupal.

I'd agree that just changing the jQuery selector would be easier and better, but this is just an alternative to be aware of.

Answer 3

You can also consider using the Views Accordion module.