How to toggle every jQuery element except the clicked?

Question

So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).

Here's sudo code of what I want to happen:

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
  $(this).children('.game-info-text').slideToggle("Slow");
  [all other ('.game-info-text')].slideUp(fast)
});

For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!

(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)

Answer 1

Something like:

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
  $(this).children('.game-info-text').slideToggle("Slow");
  $('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
  //                      ^-- removes the clicked element from all `.more-info-header`
});

Reference: .not()

Answer 2

Sounds like you're after the jQuery UI Accordion plugin.

Answer 3

$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
  var these = $(this).children('.game-info-text').slideToggle("slow");
  $('.game-info-text').not(these).slideUp("fast");
});

With the not() function you can exclude the already selected elements.

Answer 4

Like this?

  $('.more-info-header').click(function(e){
    var target = e.target || e.srcElement;
   $(this).children().not(target).find('.game-info-text').slideUp('fast');
   $('.game-info-text', target).slideToggle("slow");
  });