JSFiddle - React, Tailwind, and code Playground

by didacticode

HTML

<h2>Didacticode</h2>

    <button class="acordeon">Retos</button>
    <div class="panel">
      <p>
        Ponte a prueba afrontando retos de programación junto con Ada y Edu.
        ¡Tienes 10 días para resolverlos antes de conocer la/s respuesta/s!
      </p>
    </div>

    <button class="acordeon">Tips&Tricks</button>
    <div class="panel">
      <p>
        Trucos y consejos para mejorar tu programación, snippets de código
        interesantes, etc.
      </p>
    </div>

    <button class="acordeon">Boleticodes</button>
    <div class="panel">
      <p>
        Consulta todos los boletines de noticias de Didacticode y no te pierdas
        nada :)
      </p>
    </div>

CSS

.acordeon {
        background-color: #fed130;
        color: black;
        cursor: pointer;
        padding: 20px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 16px;
      }
      .active, .acordeon:hover{
        background-color: orange;
      }
      .panel {
        padding: 0px 20px;
        display: none;
        background-color: cornsilk;
        overflow: hidden;
      }

JavaScript

let elementosAcordeon = document.getElementsByClassName("acordeon");

      for (let i = 0; i< elementosAcordeon.length; i++){
        elementosAcordeon[i].addEventListener("click",function(){
          this.classList.toggle("active");
          let panel = this.nextElementSibling;
          if (panel.style.display == "block") {
            panel.style.display = "none";
          } else {
            panel.style.display = "block";
          }
        });
      }