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 -->