Home / Questions / 244352
Accepted
Fernanda
Asked: 2020-03-10 11:29:15 +0800 CST 2020-03-10 11:29:15 +0800 CST

how to hide an element that was made visible with javascript

  • 772

I have a menu that displays information when it is clicked and hides when another one is opened (that works fine). What I can't achieve is that when I click it again it closes and everything remains as it was at the beginning. This is what I tried but it does nothing...

function desplegar(elemento) {
if($("div.introMenu.mostrar").length > 0) {
  $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto se elimina la clase mostrar del elemento que la tenga */
}
  if($("div.introMenu.mostrar")[0] != $(elemento).next('div')[0]){ /**ESTO ES LO QUE INTENTE AGREGAR Y NO FUNCIONA*/
  $(elemento).next('div').toggleClass("mostrar");  
}      
}


function desplegar(elemento) {
  if ($("div.introMenu.mostrar").length > 0) {
    $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto se elimina la clase mostrar del elemento que la tenga */
  }
  $(elemento).next('div').toggleClass("mostrar");
}
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <main>
    <nav id="seccion">
      <ol>
        <li>
          <h2 onClick="desplegar(this)">Que hacemos?</h2>
          <div class="introMenu" id='meta'>
            <a href="nuestra_meta.php">
              <h3>No sabes por donde empezar...</h3>
              <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 onClick="desplegar(this)">Diseños adaptables</h2>
          <div class="introMenu" id='responsive'>
            <a href="diseno_responsive.php">
              <h3>Nuevas formas de conectarse...</h3>
              <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
      </ol>
    </nav>
  </main>
</body>

</html>

javascript

1 Answers

  1. Best Answer

    To hide or show the div immediately below the h2, you can use toggle which will hide or show the element, while with the not() selector you can directly hide the other elements:

    function desplegar(elemento) {
    $(elemento).next('div').toggle();
    $(".introMenu").not($(elemento).next('div')).hide();
}
    main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
    <html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <main>
    <nav id="seccion">
      <ol>
        <li>
          <h2 onClick="desplegar(this)">Que hacemos?</h2>
          <div class="introMenu" id='meta'>
            <a href="nuestra_meta.php">
              <h3>No sabes por donde empezar...</h3>
              <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 onClick="desplegar(this)">Diseños adaptables</h2>
          <div class="introMenu" id='responsive'>
            <a href="diseno_responsive.php">
              <h3>Nuevas formas de conectarse...</h3>
              <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
      </ol>
    </nav>
  </main>
</body>

</html>

    • 2