1

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.

  1. Lo que quiero hacer es cuando le dan click al encabezado se muestra el contenido
  2. 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>&nbsp;</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

1 respuesta 1

0

Para lo que quieres hacer (y lo que veo en tu código), simplemente selecciona el elemento .Header y agrégale un evento al hacer click. Si el elemento tiene ancho 0px, entonces lo pones a 230px, si tiene ancho 230px, lo pones a 0. Con eso lograrás el efecto que buscas.

function changeStyle(e) {
  const element = e.currentTarget.nextElementSibling;
  if(element.style.height === '230px') {
    element.style.height = '0';
  } else {
    element.style.height = '230px'
  }
}

document.querySelectorAll('.Header').forEach(element =>{
    element.addEventListener('click',changeStyle)
})
<table>
    <thead class="Header">
        <tr>
            <td colspan="2"  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 class="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>&nbsp;</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>

<table>
    <thead class="Header">
        <tr>
            <td colspan="2"  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 class="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>&nbsp;</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>

2
  • Hola estaba pensando en esa solución pero creo que trae problemas cuando son mas de 1 y la idea es tener varios
    – Trapss
    Commented el 23 sept. 2021 a las 1:59
  • @Trapss ahí lo tienes para varios elementos.
    – Jaime
    Commented el 23 sept. 2021 a las 2:58

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.