I have a website developed by Drupal. I use a module called collapsiblock (this is basically a jQuery plugin) to achieve the effect of an accordion. It works great with me (although it's in Beta). But I want to change it so that when the user clicks on one element of the accordion, the other elements will collapse.
In current statistics, it works in such a way that when the user clicks on one element, he checks whether the element has already been minimized or expanded, and this will make the element the opposite. This means that if the user clicks on one element, he will expand, and if he clicks on another element, he will also expand, but he will not hide the previously clicked element.
You can see the code below. I know where I need to add code to collapse and how to collapse and expand. My question is: how can I select all the elements with the ".collapsiblock" class, except for those that the user clicked?
Note. An element that has the .collapsiblockCollapsed class splits and if this class is removed from the element, it expands.
// $Id: collapsiblock.js,v 1.6 2010/08/18 19:17:37 gagarine Exp $ Drupal.Collapsiblock = Drupal.Collapsiblock || {}; Drupal.behaviors.collapsiblock = function (context) { var cookieData = Drupal.Collapsiblock.getCookieData(); var slidetype = Drupal.settings.collapsiblock.slide_type; var defaultState = Drupal.settings.collapsiblock.default_state; var slidespeed = parseInt(Drupal.settings.collapsiblock.slide_speed); $('div.block:not(.collapsiblock-processed)', context).addClass('collapsiblock-processed').each(function () { var id = this.id; var titleElt = $(':header:first', this).not($('.content :header',this)); if (titleElt.size()) { titleElt = titleElt[0]; // Status values: 1 = not collapsible, 2 = collapsible and expanded, 3 = collapsible and collapsed, 4 = always collapsed var stat = Drupal.settings.collapsiblock.blocks[this.id] ? Drupal.settings.collapsiblock.blocks[this.id] : defaultState; if (stat == 1) { return; } titleElt.target = $(this).find('div.content'); $(titleElt) .addClass('collapsiblock') .click(function () { var st = Drupal.Collapsiblock.getCookieData(); if ($(this).is('.collapsiblockCollapsed')) { $(this).removeClass('collapsiblockCollapsed'); if (slidetype == 1) { $(this.target).slideDown(slidespeed); } else { $(this.target).animate({height:'show', opacity:'show'}, slidespeed); } // Don't save cookie data if the block is always collapsed. if (stat != 4) { st[id] = 1; } } else { $(this).addClass('collapsiblockCollapsed'); if (slidetype == 1) { $(this.target).slideUp(slidespeed); } else { $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed); } // Don't save cookie data if the block is always collapsed. if (stat != 4) { st[id] = 0; } } // Stringify the object in JSON format for saving in the cookie. var cookieString = '{ '; var cookieParts = []; $.each(st, function (id, setting) { cookieParts[cookieParts.length] = ' "' + id + '": ' + setting; }); cookieString += cookieParts.join(', ') + ' }'; $.cookie('collapsiblock', cookieString, {path: Drupal.settings.basePath}); }); // Leave active blocks uncollapsed. If the block is expanded, do nothing. if (stat == 4 || (cookieData[id] == 0 || (stat == 3 && cookieData[id] == undefined)) && !$(this).find('a.active').size()) { $(titleElt).addClass('collapsiblockCollapsed'); $(titleElt.target).hide(); } } }); }; Drupal.Collapsiblock.getCookieData = function () { var cookieString = $.cookie('collapsiblock'); return cookieString ? Drupal.parseJson(cookieString) : {}; };
UPDATE:
The problem was solved by adding the following code:
$('.collapsiblock').not(this).each(function(){ $(this).addClass('collapsiblockCollapsed'); $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed); });
just above the next line:
$(this).removeClass('collapsiblockCollapsed');