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

    { 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")
				    .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() {
				        .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
				        .find("> .ui-icon").toggleClass(uiIconOpened + " " + uiIconClosed).end()
				      return false;
				      .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
				  // Open the first accordion
				  if (index == 0) {



(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.

Per poter utilizzare il form dei commenti di Disqus è necessario accettare l'utilizzo dei cookie di terze parti.