Have you set up a cool faceted search and you want to use an accordion menu to offer a better visualization behaviour?
To accomplish this task there are different ways, but the ones which works for me out of the box are these:
Standard accordion behaviour
$("div.region-sidebar-first-inner").accordion( { header: '> section.block-facetapi > div > h2.block-title' }, { "collapsible": true }, { "icons": { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" } });
Multi-opened Accordion
var headerSelector = "section.block-facetapi > div > h2.block-title"; /*var uiIconOpened = "ui-icon-triangle-1-e"; var uiIconClosed = "ui-icon-triangle-1-s";*/ var uiIconOpened = "ui-icon-plus"; var uiIconClosed = "ui-icon-minus"; $.fn.togglepanels = function(){ return this.each(function(index){ $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset") .find(headerSelector).each(function(index){ $(this) .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") .hover(function() { $(this).toggleClass("ui-state-hover"); }) .prepend('<span class="ui-icon ' + uiIconOpened + '"></span>') .click(function() { $(this) .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom") .find("> .ui-icon").toggleClass(uiIconOpened + " " + uiIconClosed).end() .next().slideToggle(); return false; }) .next() .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom") .hide(); // Open the first accordion if (index == 0) { $(this).click(); } }); }); }; $("div.region-sidebar-first-inner").togglepanels();
(thanks to supersuphot for the multi-accordion version – see this stackoverflow question).
Last but not least, the contextual links must be removed in order to make the accordion menu well-functioning when the admin is logged in (and the contextual links are visible).
$("div.region-sidebar-first-inner section.block-facetapi div.contextual-links-wrapper").remove();
Put this code above the accordion’s code (in your theme js file) and it should work.
Note: this code is tested on the Omega theme.