简体   繁体   中英

JQuery Show and hide in multiple divs

JQuery

$(document).ready(function(){        
    $("#infocontent").hide();
    $("#infocontent div").hide();       
    $('#linkwrapper a[id]').click(function(){            
        var vsubmen = this.id +"content";              
        if( $("#infocontent").is(":visible") == false ) {
            $("#" + vsubmen).show('fast',function() {
                $("#infocontent").slideDown();
            });
        } else if ( $("#" + vsubmen).is(":visible") == false ) {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
                $("#" + vsubmen).show();
                $("#infocontent").slideDown('slow');    
            });
        } else {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
            });
        }
        return false;
    });    
});

HTML

This one shows and close as well

<div id="wirelessc">                        
    <div id="linkwrapper">
    <a id="link1" href="#">Configuración del AP (Punto de Acceso)</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content"><p>1° Paso: Conectamos el Router a la PC, luego de esto ingresamos a nuestro navegador y 
                        tipeamos“192.168.1.1” en el buscador  e inmediatamente nos saltara una ventana que pedirá 
                        el nombre de usuario y contraseña de nuestro Router.
    </p></div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>


It shows when u click but doesn't close when u open others


<div id="bridge">
    <div id="linkwrapper">
        <a id="link4" href="#">Configuración del APPPPPPP (Punto de Acceso)</a><br/>
        <a id="link5" href="#">link2</a><br/>
        <a id="link6" href="#">link3</a>
    </div>
    <div id="infocontent">
        <div id="link4content"><p>1° Paso: Conectamos el Router a la PC, luego de esto ingresamos a nuestro navegador y 
                        tipeamos“192.168.1.1” en el buscador  e inmediatgsdgsdgsgsgsamente nos saltara una ventana que pedirá 
                        el nombre de usuario y contraseña de nuestro Router.
        </p></div>
        <div id="link5content">Information about 2.</div>
        <div id="link6content">Information about 3.</div>
    </div>                          
</div>

Boths divs are in the same html file

How can it be fixed?

Apart from few missing closing div tags, I didn't see anything wrong in your. Here is a link of your code, where show/hide works fine.

   <div id="wirelessc">                        
    <div id="linkwrapper">
     <a id="link1" href="#">Configuración del AP (Punto de Acceso)</a><br/>
     <a id="link2" href="#">link2</a><br/>
     <a id="link3" href="#">link3</a>
    </div>

    <div id="infocontent">
    <div id="link1content">
      <p>1° Paso: Conectamos el Router a la PC, luego de esto ingresamos   nuestro navegador y 
                    tipeamos“192.168.1.1” en el buscador  e inmediatamente nos saltara una ventana que pedirá 
                    el nombre de usuario y contraseña de nuestro Router.
      </p>
    </div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
   </div>
  </div>
  <div id="bridge">
  <div id="linkwrapper">
    <a id="link4" href="#">Configuración del APPPPPPP (Punto de Acceso)</a><br/>
    <a id="link5" href="#">link2</a><br/>
    <a id="link6" href="#">link3</a>
  </div>
  <div id="infocontent">
    <div id="link4content"><p>1° Paso: Conectamos el Router a la PC, luego de esto ingresamos a nuestro navegador y 
                    tipeamos“192.168.1.1” en el buscador  e inmediatgsdgsdgsgsgsamente nos saltara una ventana que pedirá 
                    el nombre de usuario y contraseña de nuestro Router.
    </p></div>
    <div id="link5content">Information about 2.</div>
    <div id="link6content">Information about 3.</div>
</div>                          

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM