Drupal Faceted Search with Accordion Menu

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.