Tengo un sitio web desarrollado en Drupal. Utilizo un módulo llamado collapsiblock (básicamente es un complemento de JQuery) para lograr un efecto de acordeón. Me está funcionando bien (aunque está en Beta). Pero quiero modificarlo para que cuando el usuario haga clic en un elemento del acordeón, los otros elementos colapsen.
En sus estadísticas actuales, está funcionando de tal manera que cuando el usuario hace clic en un elemento, verificará si el elemento ya está contraído o expandido y hará que el elemento sea lo contrario. Eso significa que si el usuario hace clic en un elemento, se expandirá y si hace clic en otro elemento, también se expandirá, pero no contraerá el elemento en el que se hizo clic anteriormente.
Puedes ver el código a continuación. Sé dónde debo agregar el código para contraer y cómo contraer y expandir. Mi pregunta es: ¿Cómo selecciono todos los elementos que tienen la clase '.collapsiblock' excepto el que el usuario ha hecho clic?
Nota: el elemento que tiene la clase '.collapsiblockCollapsed' se contrae y si esta clase se elimina del elemento, se expande.
// $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) : {};
};
ACTUALIZAR:
El problema se ha resuelto agregando el siguiente código:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
justo encima de la siguiente línea:
$(this).removeClass('collapsiblockCollapsed');
fuente
not(this)
:).each()
,$('.collapsiblock').not(this).slideUp()
debería funcionar bien.Ejemplo:
fuente
Puede realizar un seguimiento de qué elemento ya se ha hecho clic con su propio controlador de clics de jquery y la función de datos de jquery (...). Luego filtre iterando sus elementos .collapsiblock con la función filter (...) de jquery para incluir los elementos que necesita.
fuente