2

como puedo hacer para alternar la visibilidad de dos divs, es decir (si "item1" show "item2" hide y viceversa?

<div><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->

3 respuestas 3

7

Utilizando Jquery podemos hacer los siguiente.

$("div").click(function(){  
  $("div").show();
  $(this).hide();  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div style="display: none;"><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->

1
  • Gracias weimar! Sencillo, y funciona perfecto.
    – Diego
    Commented el 9 abr. 2016 a las 23:22
1

Asuimiendo que tenemos inicialmente uno de los divs oculto por ejemplo:

<div><a>Item 1</a></div>
<div class="display:none"><a>Item 2</a></div>

bastará con seleccionar ambos y ejecutar el método .toggle() en ambos:

$("#div1,#div2").toggle();

.toggle() muestra el elemento si está oculto o lo oculta si está visible.

Ejemplo completo:

$("#div1,#div2").click(function(){
  $("#div1,#div2").toggle();
});
#div2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"><a>Item 1</a></div>
<div id="div2"><a>Item 2</a></div>

0

Una forma puede ser:

$("#div1").click(function(){  
  $('#div2').toggle(); 
  $('#div1').toggle(); 
});
$("#div2").click(function(){  
 $('#div1').toggle();
 $('#div2').toggle(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="show" id="div1"><a>Item 1</a></div> <!-- Click para mostrar Item2 y ocultar Item1 -->
<div style="display: none;" id="div2"><a>Item 2</a></div> <!-- Click para mostrar Item1 y ocultar Item2 -->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.