I have several buttons in a menu that should display information with a tab down (each individually its own). Since they all do the same thing, create a function (with .toggle) to add and remove a class and change the display from none to block. so far we're doing fine. I can't make it so that when one is opened, the one that was previously open is closed,
I don't know if I should make an array with a conditional, so that the element of the button that was clicked is identified and "block" is executed in it and a display none to the rest... But I'm new to js and I don't know how to achieve it
I pass code to guide them. If anyone knows a better way to achieve what he needs, it will be well received. Thank you very much
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 -->
Simple, take the element that currently has the show class and remove it.
Edition:
It is possible that the above problems if there are none "open". For this better ask before if there is any.
Edit 2: To also allow closing the active element
With
Bootstrapit is easy to achieve... I leave you an example with your information.