0

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)

0

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');
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.