comment sélectionner toutes les classes sauf l'élément cliqué dans JQuery?

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');

Utilisez le notsélecteur.

Exemple:

$('.collapsiblock').click(function(){
     $('.collapsiblock').not(this).each(function(){
         $(this).slideUp();
     });
     $(this).slideDown();
})

Essayez ceci, c'est une meilleure façon car si vous utilisez chaque fonction, elle se chargera et à l'avenir, lorsque vous aurez plus de mille div, il faudra beaucoup de temps pour glisser vers le haut et vers le bas.

Exemple:

$('.collapsiblock').click(function(){
   $('.collapsiblock').not(this).slideUp();
   $(this).slideDown();
});

Vous pouvez garder une trace de quel élément a déjà été cliqué avec votre propre gestionnaire de clics jquery et la fonction data (...) de jquery. Puis filtrez l'itération de vos éléments .collapsiblock avec la fonction filter (...) de jquery pour inclure les éléments dont vous avez besoin.