J'ai un site Web développé sur Drupal. J'utilise un module appelé collapsiblock (c'est essentiellement un plugin JQuery) pour obtenir un effet d'accordéon. Cela fonctionne bien avec moi (bien que ce soit en version bêta). Mais je veux le modifier pour que lorsque l'utilisateur clique sur un élément de l'accordéon, les autres éléments se réduisent.
Dans ses statistiques actuelles, il fonctionne de manière à ce que lorsque l'utilisateur clique sur un élément, il vérifie si l'élément est déjà réduit ou développé et il fera de l'élément le contraire. Cela signifie que si l'utilisateur clique sur un élément, il se développera et s'il clique sur un autre élément, il se développera également, mais il ne réduira pas l'élément sur lequel vous avez cliqué précédemment.
Vous pouvez voir le code ci-dessous. Je sais où dois-je ajouter le code pour réduire et comment réduire et développer. Ma question est: comment sélectionner tous les éléments qui ont la classe «.collapsiblock» à l'exception de celui sur lequel l'utilisateur a cliqué?
Remarque: l'élément qui a la classe '.collapsiblockCollapsed' est réduit et si cette classe est supprimée de l'élément, il est développé.
// $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) : {};
};
METTRE À JOUR:
Le problème a été résolu en ajoutant le code suivant:
$('.collapsiblock').not(this).each(function(){
$(this).addClass('collapsiblockCollapsed');
$(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});
juste au-dessus de la ligne suivante:
$(this).removeClass('collapsiblockCollapsed');