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)