Ocultar varias div

[Alexis88]

Puedes asignar una clase al elemento que se haga visible en el momento en el que pulses un botón; previamente, buscas si hay algún elemento con dicha clase y, además de ocultarlo, le quitas la clase en cuestión.

Utilizando el ejemplo anterior y suponiendo que todos los paneles están ocultos desde un inicio:

Código Javascript:

$(".button").on("click", function(){
    var posBut = $(".button").index(this),
        panel = $(".panel").eq(posBut),
        aux;
    
    if (aux = $(".visible")){ //Si hay un elemento con la clase "visible"
        aux.removeClass("visible"); //Se la quito
        aux.slideToggle(); //Y lo oculto
    }
    
    if (aux[0] != panel[0]){ //Si el elemento equivalente al botón pulsado es diferente al que posee la clase "visible"
        panel.addClass("visible"); //Le asigno dicha clase
        panel.slideToggle(); //Y lo muestro
    }
});
 

Puedes ahorrar líneas usando la concatenación de métodos de jQuery:

Código Javascript:

$(".button").on("click", function(){
    var posBut = $(".button").index(this),
        panel = $(".panel").eq(posBut),
        aux;
    
    if (aux = $(".visible")){
        aux.removeClass("visible").slideToggle();
    }
    
    if (aux[0] != panel[0]){
        panel.addClass("visible").slideToggle();
    }
});
 

En la última condición, tomo a los elementos situados en la posición cero de cada selección puesto que jQuery asigna a los elementos en cuestión en dicha posición; mientras que en las otras se encuentran elementos como el contexto, selector, entre otros, impidiendo que se haga una comparación a nivel de elementos del DOM (no nos interesa el contexto ni los selectores utilizados).

DEMO