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
function desplegar() {
document.getElementById("meta").classList.toggle("mostrar"),
document.getElementById("responsive").classList.toggle("mostrar");
}
/*
var opciones =["meta","responsive","catalogo","tienda","blog","diseno","planes"];
function desplegar(){
(no se como seria la identificacion del # donde se cliqueo????').classList.toggle("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;
}
<main>
<nav id="seccion">
<ol>
<li>
<h2 onClick="desplegar()">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()">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>
modificar el display de none a block. hasta ahí vamos bien. El problema es que todos responden a la misma función, por lo cual se despliegan todas las pestañas en simultaneo(no importa que botón cliquee)...
Quiero hacer un array para que se identifique el ID del botón que se cliqueo y solo ejecute la función en ese id especifico. Podrian ayudarme con la parte de identificar el id donde se oprime. Paso codigo para orientarlos. Si alguno conoce una mejor forma de lograr lo que necesito será bien recibida Muchas gracias
this.id
en la función que escucha los clicks de esos elementos obtendrías elid
de cada botón. Ten en cuenta que se pueden agregar listeners por clases, por tipos de elementos, etc. Es cuestión de organizarte y hacer las cosas de la forma más simple posible.