Wrapping a block in jQuery Accordion

Question

Problem

I'm creating a search page for a module. On that page I have an exposed views filter block and I'd like to put it into a jQuery accordion.

In case it's relelvant: In the same sidebar below the filter block I have a series of facets which use the Facet API Collapsible Module.

At the moment I've put the script "facetaccordians.js" in mytheme/js/ and added it using the .info file.

What I've tried so far

Here is the .js file.

(function ($) {
        $(function() {
               $(document).ready(function(){
                    $(".views-exposed-form").accordion();
                }); 
            });
})(jQuery);

This selects the following horrible bit of HTML:

    <div class="views-exposed-form ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <div class="views-exposed-widgets clearfix ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
    </div>

But the accordion doesn't work correctly. It doesn't open and close.

I tried adding in <h3>Test</h3> into the tpl.php for views exposed forms to give this:

    <div class="views-exposed-form ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
        <div class="views-exposed-widgets clearfix ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
    </div>

However it still doesn't work. And that will cause me a bunch of other problems. What's the correct way to put this block into an accordian? OR what am I doing wrong? Do I need to select a div above the current ones, do I need different HTML?

(I know about the Accordian Blocks module, but it doesn't work either. The open close also doesn't work)

Answer 1

Easy Solution 1

As it turns out the accordion blocks does work. However if you're just using it for a single block it won't automatically because the default jQuery accordion only works with multiple objects.

Install Accordion blocks and open the accordion_init.js file. It'll look like this

(function($) {
  Drupal.behaviors.accordion_blocks = {
      attach: function() {
        $('.accordion_blocks_container').accordion({header: "h2", autoHeight: false, });
      }
  };
})(jQuery);

You need to add the property, collapsible: true, as shown below. I've also removed the animation and made it start closed by default.

(function($) {
  Drupal.behaviors.accordion_blocks = {
      attach: function() {
        $('.accordion_blocks_container').accordion({header: "h2", autoHeight: false, collapsible: true, active: false, animated: false});
      }
  };
})(jQuery);

Possible Other Avenue

I also managed to get jQuery accordions working, it has to have a certain HTML structure (see the UI documentation) which is difficult to implement around blocks thus why I took the easy route.

But if you fancy trying it the following code will enable jQuery accordions on your website for your theme at a basic level. This code goes into the template file.

function themename_preprocess_page (&$vars) {
    drupal_add_library('system', 'ui.accordion');
    drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion({ collapsible: true, active: false, header: "h3", animated: false});});', 'inline');
}