Hola tengo dos problema y he estado buscando por la web pero no encuentro alguna solución tengo una tabla con un encabezado y un cuerpo que va el contenido.
- Lo que quiero hacer es cuando le dan click al encabezado se muestra el contenido
- y si le dan click de nuevo se oculte (el cuerpo parte oculto)
he buscado que nextElementSibling
accede al siguiente elemento pero solo lo veo con divs y llego a entender la logica pero con la tabla en el siguiente elemento me sale "null"
nota: estoy trabajando en un entorno donde el css no es posible aplicarlo ya que no se puede acceder a la parte del <header> ... <\header>
por lo tanto el css lo pongo "inline" dentro de las etiquetas de html
La tabla es la siguiente:
<table>
<thead>
<tr>
<td colspan="2" class="Header" style="height:60px;background:#f23a00;color:rgb(255, 255, 255);text-indent:20px;letter-spacing: 5px;text-transform: uppercase;width:1140px;cursor:pointer"> <b> Encabezado has click para mostrar el contenido</b> </td>
</tr>
</thead>
<tbody style="overflow: hidden;display:block;height:0px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
<tr>
<td colspan="2" style="width:1140px;padding:20px 0px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac egestas mauris. Duis quis sodales risus. Sed a urna faucibus metus consequat condimentum. Vestibulum commodo dictum libero sed porttitor. Morbi pretium imperdiet turpis, mollis suscipit est gravida at.<br></p>
</td>
</tr>
<tr>
<td> </td>
<td style="width:90px;text-align:center;background:#b1b2b2;padding:5px;"><a href="#Inicio" style="color:#EFF6FA;letter-spacing: 3px;padding:2px;text-decoration:none;">SUBIR</a></td>
</tr>
</tbody>
</table>
El contenido del script que tengo es el siguiente:
const Cabeceras = document.querySelectorAll(".Header");
Cabeceras.forEach(el => {
el.addEventListener('click', function() {
const panel = this.nextElementSibling;
console.log(this); // esto lo hice por que tenia una arrow function y this paso hacer windos y entonces lo pase a function () y me toma bien
console.log(panel); // aqui me arroja "null"
/*
CONTENIDO DE IDEA.
*/
})
})
Contenido de idea:
la idea seria acceder al "tbody" y mostrarlo y si le dan click de nuevo ocultarlo para esto tenia la idea de agregarle una clase como "Habilitar" con classList.toggle
pero como no tengo un archivo css o un head donde poner alguna clase "habilitar" habia pensado en hacer algo como
document.querySelectorAll(".Habilitar").forEach( (el) => {
el.style.cssText = "overflow-y: auto;display:block;height:230px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"
});
pero no funciona no funciona cuando se le da click (no se aplica el estilo) y se le agrega la clase. hice la prueba agregando una clase en el elemento que tengo la clase Header
y le quise cambiar el color pero no funcionaba.
Entonces tengo esos 2 problemas de como mostrar y ocultar cada vez que se le da click a la cabecera de la tabla.
Nota: el problema es cuando son mas de una tabla para uno es relativamente fácil