0

tengo varios botones de un menú que deben desplegar información con una pestaña hacia abajo (cada uno individualmente la suya). Como todos hacen lo mismo cree una función (con .toggle) para agregar y quitar una clase y modificar el display de none a block. hasta ahí vamos bien. No logro hacer que cuando se abre uno, se cierre el que estaba abierto anteriormente,

No se si debería hacer un array con un condicional, para que se identifique el elemento del botón que se cliqueo y se ejecute "block" en ese y un display none al resto... Pero soy nueva en js y no se como lograrlo

Paso codigo para orientarlos. Si alguno conoce una mejor forma de lograr lo que necesito será bien recibida Muchas gracias

function desplegar(elemento) {
  $(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>

<!-- begin snippet: js hide: false console: true babel: false -->

2 respuestas 2

1

Simple, coge el elemento que tiene la clase mostrar en ese momento y quitasela.

function desplegar(elemento) {
  $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto eliminas la clase mostrar del elemento que la tenga */
  $(elemento).next('div').toggleClass("mostrar");  
}

Edición:

Es posible que lo anterior de problemas si no hay ninguno "abierto". Para ello preguntar mejor antes si hay alguno.

function desplegar(elemento) {
  if($("div.introMenu.mostrar").length > 0) {
      $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto eliminas la clase mostrar del elemento que la tenga */
  }
  $(elemento).next('div').toggleClass("mostrar");  
}

Edición 2: Para permitir también cerrar el elemento activo

function desplegar(elemento) {
  if($("div.introMenu.mostrar").length > 0) {
      $("div.introMenu.mostrar").removeClass("mostrar"); /** Con esto eliminas la clase mostrar del elemento que la tenga */
  }
  if($("div.introMenu.mostrar")[0] != $(elemento).next('div')[0]){
      $(elemento).next('div').toggleClass("mostrar");  
  }      
}
8
  • 1
    Yo hago mucho este tipo de cosas y si un selector no existe jquery simplemente lo ignora, nunca me ha dado problemas
    – Montaycabe
    Commented el 28 feb. 2019 a las 12:53
  • perfecto! gracias por el aporte
    – Fernanda
    Commented el 28 feb. 2019 a las 12:58
  • @Montaycabe si, intuia que lo iba a ignorar pero al no estar seguro preferi darle una alternativa a la persona que pregunta por si le fallaba.
    – JDev
    Commented el 28 feb. 2019 a las 13:21
  • @JDev encontre un solo inconveniente, cuando le vuelvo a hacerle click no se cierra como lo hacia anteriormente (volver a que ninguno se muestra). Eso se puede solucionar?? gracias de antemano
    – Fernanda
    Commented el 28 feb. 2019 a las 13:40
  • Si, ya veo porque ocurre, ¿cual de las 2 opciones usaste?
    – JDev
    Commented el 28 feb. 2019 a las 13:48
1

Con Bootstrap es fácil lograrlo... te dejo un ejemplo con tu información.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Que hacemos?
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Diseños adaptables
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <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>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Si deseas un tercer grupo...
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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.