Abrir un div al hacer click

[jbryan1093]

Tengo 3 botones, lo que deseo es que al hacer clic en boton1 se abra descripción 1, pero al hacer clic en boton2, se cierre automaticamente la descripcion1 para abrir la descripcion2 en el mismo lugar.

Las 3 descripciones estan con display none.

Me Funciona cuando abre cada descripcion, pero no cierra cuando abro el otro.
Y Si se puediera trabajar con class y no id, sería mejor.
HTML

Código:

 
<div id='boton1'>
        <a>Titulo...</a>
</div>
<div id='boton2'>
        <a>Titulo...</a>
</div>
<div id='boton3'>
        <a>Titulo...</a>
</div>

<div id='descripcion1'>
</div>
<div id='descripcion2'>
</div>
<div id='descripcion2'>
</div>

------------------------------------------------------------------

Aqui no se si poner if($("#boton1).click"){
$("#descripcion1").slideToggle("slow");
} else if(){
}

algo asi

Código:

<script> 
$(document).ready(function(){
	
  	$("#boton1").click(function(){
    $("#descripcion1").slideToggle("slow");
	
  });
  $("#boton2").click(function(){
    $("#descripcion2").slideToggle("slow");
	
  });
  $("#boton3").click(function(){
    $("#descripcion3").slideToggle("slow");
	
  });
});
</script>

Gracias, slds

[Alexis88]

Cada vez que des un clic sobre alguno de los botones, tendrías que recorrer el conjunto de elementos <div> de abajo y verificar si el número asignado al final del id de cada uno de ellos, coincide con el número asignado al final del id del botón. Si son iguales, muestras al <div>, caso contrario, lo ocultas.

Código Javascript:

$("[id^=boton]").click(function(){
    var valorBoton = this.id[this.id.length - 1];
    Array.prototype.forEach.call($("[id^=descripcion]"), function(div){
        var valorDiv = div.id[div.id.length - 1];
        if (valorBoton == valorDiv)
            $(div).slideDown("slow");
        else
            $(div).slideUp("slow");
    });
});
 

Para realizar el recorrido sobre los elementos <div>, utilizo el método Array.prototype.forEach, pero si quieres que esto también funciones en Internet Explorer 8 y versiones inferiores, te conviene utilizar un bucle clásico como for o while.

Saludos

[Ktulu]

Un poco mas simple sería trabajarlo con clases.
Para empezar restructuraría el DOM:

Código:

<div class="boton" id='1'>
        <a>Titulo...</a>
</div>
<div class="boton" id='2'>
        <a>Titulo...</a>
</div>
<div class="boton" id='3'>
        <a>Titulo...</a>
</div>

<div class="descripcion" id='descripcion1'></div>
<div class="descripcion" id='descripcion2'></div>
<div class="descripcion" id='descripcion3'></div>

Ahora el evento en los botones (para evitar el solapamiento de efectos lo mejor es usar el callback del método slideToggle del div que se quiere ocultar):

Código:

$('.boton').on('click',function(){
  $('.descripcion:visible').slideToggle('slow',function(){
     $('.descripcion#descripcion'+$(this).attr('id')).slideToggle('slow');
  })
})

Saludos!

[Alexis88]

Estimado Ktulu, he implementado el cambio que propones pero no funciona como nuestro amigo jbryan1093 desea. Sería bueno que pongas un ejemplo en vivo para verlo funcionar.

Saludos

[Ktulu]

Perdón, no tuve en cuenta que los divs podrían estar ocultos desde un comienzo.
Para ese caso el js sería el siguiente:

Código:

$('.boton').on('click',function(){
  $('.descripcion:visible').slideToggle('fast');
  $('.descripcion#descripcion'+$(this).attr('id')).slideToggle('fast');
})

No se como insertar un iframe como lo hiciste vos con el ejemplo, pero éste es el link al mismo funcionando:
http://jsfiddle.net/W2JnV/

Saludos!

[jbryan1093]

Hola, muy buen dato. Pero lo que quiero es que si hago click el boton 1 se abra descripción 1 y si vuelvo apretar el boton1 se cierre descripcion1. Como hago eso?, si dejar de lado que si apreto otro boton se cierre el otro para abrir al cual haces click. Eh intentado hacerlo, pero estoy aprendiendo recién y no me sale.

[herzbazi]

Iniciado por jbryan1093

Hola, muy buen dato. Pero lo que quiero es que si hago click el boton 1 se abra descripción 1 y si vuelvo apretar el boton1 se cierre descripcion1. Como hago eso?, si dejar de lado que si apreto otro boton se cierre el otro para abrir al cual haces click. Eh intentado hacerlo, pero estoy aprendiendo recién y no me sale.

un ejmplo

Código HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle();
});
</script>
 
</body>
</html>
 

ya acomodalo a tu conveniencia.

nota: ejemplo tomado de http://api.jquery.com/toggle/

se si te das cuenta esa usando el toggle(); lee un poco la documentacion de jquery para entender lo que hace exactamente .

ok nos vemos y espero haberte ayudado .. si no escribe un privado.. nos vemos

[Alexis88]

Al ejemplo que te di, solo cámbiale el método slideDown que aplico a los <div> que corresponden con la opción seleccionada por el método slideToggle, de ese modo, si el <div> está oculta, se muestra, caso contrario, se oculta.



Saludos

[Ktulu]

Iniciado por jbryan1093

Hola, muy buen dato. Pero lo que quiero es que si hago click el boton 1 se abra descripción 1 y si vuelvo apretar el boton1 se cierre descripcion1. Como hago eso?, si dejar de lado que si apreto otro boton se cierre el otro para abrir al cual haces click. Eh intentado hacerlo, pero estoy aprendiendo recién y no me sale.

En ese caso cambiaríamos un poco el evento para controlar que el div a mostrar no sea el que ya se encuentra visible:

Código Javascript:

$('.boton').on('click',function(){
  var id = $(this).attr('id'),
      visible = $('.descripcion:visible');
  visible.slideToggle('fast');
  if ('descripcion'+id!=visible.attr('id')) $('.descripcion#descripcion'+id).slideToggle('fast');
})
 

El ejemplo:



Saludos!

[jbryan1093]

Gracias a todos.
KTULU, me sirvió mucho tus códigos, es justo como quería.

En jquery la propiedad attr se puede poner otra cosa. Es decir el ID de todos los botones son con los número "1, 2, 3", pero puedo poner letras?. cuando lo cambio deja de funcionar todo.
Traté de averiguar más sobre tus codigos pero no logro entenderlo bien.