Bueno, desde hace algún tiempo he estado desarrollando un menú con botones que despliegan un box con contenido mediante jQuery, mi problema es que estoy usando clases en CSS para los box & tengo el problema de que uso el mismo box para todos los botones & si presiono uno éste se despliega, si presiono el otro, pues se vuelve a ocultar... mis conocimientos en jQuery son básicos así que no sé como solucionar esto, agradecería cualquier planteamiento de solución o cualquier ayuda, gracias.

Ejemplo de mi código
<script>
$(document).on("ready", function()
{
$(".button").click(function()
{
$(".info").slideToggle("slow");
});

$(".button2").click(function()
{
$(".info").slideToggle("slow");
});
});
</script>
<div class="button box">Información</div>
<div class="info box">Información que se despliega</div>


<div class="button2 box">Acciones</div>
<div class="info box">Información que se despliega</div>


<div class="button3 box">Cuenta</div>
<div class="info box">Información que se despliega</div>
Ya sé que podría crear una nueva clase para la información, pero sería algo tonto debido a que estaría creando código dioquis que sólo ocuparía espacio, agradezco cualquier ayuda ñ.ñ

Puedes usar un id específico o una clase extra para cada box y así identificarlos con jquery.

He hecho algo parecido, pero aún más eficiente, use data-id & ya lo identifiqué con jQuery & así no tuve que editar nada del CSS, aún así agradezco tu ayuda ñ.ñ Muchas gracias:3

No tenias que editar nada en el css, solo agregar una clase extra para identificar ese div con jquery, pero que bueno que lo lograste ya

Sería agregar muchas clases, además tendría que mover todo el contenido de la clase principal:v