RSS

Mostar un Div y Ocultar otros con JQUERY

09 Mar

Hace un tiempo tuve que realizar un ejercicio donde mostrara un Div oculto, pero este convivía con otros Divs, y al momento que se mostrara el Div seleccionado si había algún otro visualizado este se ocultara automáticamente.

Primeramente armamos nuestra estructura HTML en la cual vamos a relacionar nuestros enlaces con los Divs por medio del href de los enlaces, colocando en ellos los id de nuestros divs

<a href="#div1" class='MO'>loquesea 1</a>
<a href="#div2" class='MO'>loquesea 2</a>
<a href="#div3" class='MO'>loquesea 3</a>
<a href="#div4" class='MO'>loquesea 4</a>
<a href="#div5" class='MO'>loquesea 5</a>

<div id="div1" class="oculto">Contenido 1</div>
<div id="div2" class="oculto">Contenido 2</div>
<div id="div3" class="oculto">Contenido 3</div>
<div id="div4" class="oculto">Contenido 4</div>
<div id="div5" class="oculto">Contenido 5</div>

Después generamos el código en JQuery, primeramente verificamos si el elemento actual se encuentra visible y en caso de que si lo ocultamos, después verifica si algún otro elemento es visible que lo oculte y muestre el elemento actual lo muestre.

jQuery(document).ready(function(){ 
    $(".oculto").hide();              
    $(".MO").click(function(){
          var nodo = $(this).attr("href");  

          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
		$(".oculto").hide();           					 
		$(nodo).fadeToggle( "slow" );
		return false;
          }
    });
});	

Es un ejemplo muy sencillo pero que ha funcionado.

Anuncios
 
26 comentarios

Publicado por en 09/03/2012 en Jquery

 

Etiquetas:

26 Respuestas a “Mostar un Div y Ocultar otros con JQUERY

  1. nicofreelance

    10/07/2012 at 3:24 pm

    Hola!me sirvió mucho el código, pero te agradecería mucho que me puedas ayudar un problema que seguramente es sencillo de resolver pero no se me ocurre como. El sitio que estoy haciendo tiene un menu de bonones que al hacerles click hacen desaparecer un div para que aparezca otro (con el código que subiste al blog), todo en un mismo html, hasta ahí perfecto, pero pasa que al ingresar al sitio no se ve ningun div porque todavia no hice click en ningun boton, se entiende? al no tener ningun boton activo no se ve ningun div.
    este es el script:

    jQuery(document).ready(function(){
    $(“.ocultar”).hide();
    $(“.mo”).click(function(){
    var nodo = $(this).attr(“href”);
    if ($(nodo).is(“:visible”)){
    $(nodo).hide();
    return false;
    }else{
    $(“.ocultar”).hide();
    $(nodo).fadeToggle( “slow” );
    return false;
    }
    });
    });

    y esta la llamada:

    Home
    Nosotros
    Servicios
    Galería de Imágenes
    Contacto

    Desde ya muchas gracias,ojalá me puedas entender el problema y darme una solución. Un abrazo! Nicolás.

     
    • blogcape

      12/07/2012 at 10:41 am

      Hola nicolas, puedes agregar la siguiente linea

      $(“#div1”).show();

      donde “#div1” es el id del div que quieres mostrar, esta linea agregala en la siguiente parte:

      jQuery(document).ready(function(){
      $(“.oculto”).hide();
      $(“#div1”).show();
      $(“.MO”).click(function(){

      espero te haya sido de ayuda.

      Saludos

       
      • Luis Eduardo Lopez

        12/04/2014 at 9:42 am

        brother para el #div1 utilizastes un signo para abrir y una comilla doble para cerrar..

         
  2. nicofreelance

    12/07/2012 at 11:15 am

    Muchas gracias!!sos un genio, me re sirvió!!con esa línea de código me resolviste un dolor de cabeza importante jeje,si necesitas ayuda con algun software de diseño gráfico no dudes en preguntar!un abrazo y de nuevo gracias!

     
    • blogcape

      12/07/2012 at 11:59 am

      De nada, de igual forma cualquier duda en la que te pueda ayudar con toda confianza.

      Saludos.

       
  3. nicofreelance

    15/07/2012 at 8:11 pm

    Perdona que te molesto de nuevo, pero para terminar con esto de la botonera lo que me falta es que al cargar la página el boton del Home esté activo. Lo más evidente sería darle un class a ese link, pero al estar todas las secciones del contenido en un solo html el botón quedaría todo el tiempo activo. ¿Tenes idea como resolverlo?

    Codigo JS:

    jQuery(document).ready(function(){
    $(“.ocultar”).hide();
    $(“#content”).show();

    $(“.mo”).click(function(){
    var nodo = $(this).attr(“href”);
    if ($(nodo).is(“:visible”)){
    $(nodo).hide();
    return false;
    }else{
    $(“.ocultar”).hide();
    $(nodo).fadeToggle( “slow” );
    return false;
    }
    });

    });

    Codigo HTML:
    Home
    Nosotros
    Servicios
    Galería de Imágenes
    Contacto

    Gracias

     
  4. nicofreelance

    16/07/2012 at 10:50 pm

    ademas cuando hago click sobre cualquier lugar de la página (por mas que no sea un link) se desactivan los botones, quedan todos en estado inactivo. Espero que me puedas ayudar con esto, igual ya me resolviste uno grande!un abrazo!!

     
    • blogcape

      25/07/2012 at 12:05 pm

      Hola nicofreelance estoy escribiendo un post con una modificación del código que se adapta a tu necesidad.

      Saludos.

       
      • Luis Eduardo Lopez

        12/04/2014 at 9:56 am

        hola blogcape si puedes querria saber donde puedo encontrar ese post gracias me sera de gran atuda

         
  5. nicofreelance

    25/07/2012 at 12:56 pm

    gracias Blogcape,al final lo pude resolver pero sin código, dividí cada sección en un html diferente y listo. Muchas gracias igual!!

     
  6. Armando

    25/09/2012 at 11:59 pm

    Hola Nico, primero queria felicitarte por la excelente informacion y tambien queria pedirte ayuda. Sucede que estoy utilizando tu mismo codigo pero deseo utilizar un efecto diferente a la hora de aparecer y desaparecer los div, el efecto que quiero utiliza el plugin cycle y esta en este enlace: http://jquery.malsup.com/cycle/ . El efecto que me gusta se llama zoom (en esa web esta el demo). Muchas gracias

     
  7. Luciano Soro

    03/10/2012 at 10:08 am

    que tal,te queria preguntar como van organizadas las partes,osea me bajo el jquery y a la vez pongo el codigo dentro de dos etiquetas ?

     
  8. ari

    05/10/2012 at 5:02 am

    Hola me gustaria saber si has puesto el post con la modificacion del codigo para que se quede marcado el link en el k estas

     
  9. BRaulio

    17/10/2012 at 1:15 am

    Mi hermano, me resolviste la vida, lo juro, solo un favor enorme, se esta dentro de tus posibilidades claro, me gustaria que el div que aparesco tenga un barrido desde abajo, ¿Sabras como hacerlo?¿Que tengo que modificar? Muchas gracias de nuevo.

     
  10. BRaulio

    17/10/2012 at 1:39 am

    Para que te des una idea de lo que me gustaría te dejo este link:
    http://www.pullandbear.com/webapp/wcs/stores/servlet/home/pullandbearmx/es/pullandbear

    Si le das clic en novedades (angulo inferior izquierdo) veras el efecto que quiero lograr, muchas gracias de nuevo. Buen día.

     
  11. ari

    24/10/2012 at 4:23 am

    Hola como hago para que quede activo el enlace en el que me encuentro?

     
    • blogcape

      25/10/2012 at 11:24 pm

      Te refieres a un marcador de elemento seleccionado en los links de selección?

       
      • Jey Lopez

        09/03/2015 at 12:39 pm

        Tu comentario está pendiente de moderación.

        Hola, esto me ayudo mucho realmente he estado Investigando como hacer que si ya un href esta seleccionado y yo le de clik al mismo link no se oculte el contenido, esto debe de suceder hasta que le de clik a otro href. Podrían ayudarme.

        Saludos

         
  12. ari

    26/10/2012 at 3:32 am

    SI quiero que cuando pincho en loquesea1 se quede en un color distinto al resto para saber donde me encuentro y asi sucesivamente.

     
  13. ciberdavisxp

    10/11/2012 at 8:06 am

    hola disculpa la molestia de mi parte, pero soy nuevo y estoy aprendiendo diseño web, la cuestion es ke no encuentro como incrustar o no c si lo estoy haciendo bien mediante las tags code, ya relacione los ids y las classes, he probado aun darle al inicio a las capas el atributo de oculto pues sino se muestra la ultima osea la ke esta por ensima de todas. gracias de antemano

     
  14. Jocarsoft

    11/12/2012 at 11:10 am

    gracias me sirvio mucho el codigo, yo lo hacia, pero no tan resumido como este, gracias

     
  15. Arturo

    20/07/2013 at 3:17 am

    Hola buenas, me gustaría saber que código tengo que poner para algo parecido a esto pero en lugar de hacer click , quiero que cuando el raton pase por encima de un menú de 3 imagenes salga un submenú para cada una de ellas. Algo asi

    Embarcate Experiencia Calidad Este es el menú)

    Buscar A bordo Preparación (Estos son el submenú)
    Especial Actividades Conozca

    Muchas gracias

     
  16. Antonio Atenas

    18/10/2013 at 9:16 am

    No funciona en IE10

     
  17. Gabriel Mendoza

    14/09/2014 at 9:05 pm

    HOLA YO USE EL CODIGO DE LA SIGUIENTE FORMA:

    – DIV 1 VISIBLE A PRIMERA VISTA
    – EL BOTON SOLO ACTIVA EL DIV (LE QUITE ESA DOBLE FUNCION DE ACTIVAR Y DESACTIVAR) ASI MOLA MAS..! GRACIAS POR TAN BUEN APORTE.. LO USE EN ESTA WEB

    http://www.somosblue.com/web en la seccion de #IdeasInteligentes

    loquesea 1
    loquesea 2
    loquesea 3
    loquesea 4
    loquesea 5

    Contenido 1
    Contenido 2
    Contenido 3
    Contenido 4
    Contenido 5

    var $b = jQuery.noConflict();
    jQuery(document).ready(function(){
    $b(“.oculto”).hide();
    $b(“.MO”).click(function(){
    var nodo = $b(this).attr(“href”);

    if ($b(nodo).is(“:visible”)){
    //$b(nodo).hide();
    return false;
    }else{
    $b(“.oculto”).hide();
    $b(“#div1”).show();
    $b(nodo).fadeToggle( “slow” );
    return false;
    }
    });
    });

     
  18. Kris

    22/12/2014 at 9:04 am

    genial, me salvaste con esto, a la lista de códigos útiles!

     
  19. Jey Lopez

    09/03/2015 at 12:16 pm

    Hola, esto me ayudo mucho realmente he estado Investigando como hacer que si ya un href esta seleccionado y yo le de clik al mismo link no se oculte el contenido, esto debe de suceder hasta que le de clik a otro href. Podrían ayudarme.

    Saludos

     

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: