1

Tengo varios problemas con mi acordeon de bootstrap: No funciona correctamente, es decir, solo se abre el primer despeglable, cuando quiero abrir el segundo tambien se abre el tercero. Luego cuando quiero cerrar o abrir el primero, se me cierran o abren los otros dos. Es complicado! Que es lo que esta mal?

introducir la descripción de la imagen aquí

Codigo HTML:

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Playroom Main Page</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    </head>
    <body>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Blog de notas
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
             <ul>
                <li><a href="#cienciasnaturalesapuntes">Ciencias naturales</li>
                <li><a href="#cienciassocialesapuntes">Ciencias sociales</li>
                <li><a href="bloginside.html">Matematica</li>
                <li><a href="#lenguapuntes">Practicas del lenguaje</li>
                <li><a href="#ingles">Ingles</li>
                <li><a href="#otros">Otros</li>
             </ul>
            </div>
          </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Examenes (titulo)
                  </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                   //contenido     

                  </div>
                </div>
            </div>
                <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Tareas (titulo)
                      </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        //contenido
                      </div>
                    </div>
                </div>
            
       </div>              
       </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
       </body>
       </html>

Nota: Le saque el contenido del segundo y tercer acordeon para que el codigo no se muy largo. Muchas gracias por la atencion!

2
  • porque habras agregado php...
    – gbianchi
    Commented el 24 sept. 2023 a las 21:09
  • los divs se llaman iguales ;) <div id="collapseTwo"
    – gbianchi
    Commented el 24 sept. 2023 a las 21:10

1 respuesta 1

0

El problema es que cada button tiene una propiedad llamada: data-bs-target="#collapseThree" que hace referencia al id del elemento que colapsará o desplegará.

        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapseTwo" //Id del ID colapsar/expander
          aria-expanded="false"
          aria-controls="collapseTwo"
        >
          Examenes (titulo)
        </button>
        <div
            id="collapseTwo" //A este hace referencia el data-bs-target
            class="accordion-collapse collapse"
            data-bs-parent="#accordionExample"
         >
        //Contenido
        <div>

Cada item del acordeón debe tener un id diferente, por lo que el data-bs-target del button también debe ser diferente a los demás, haciendo referencia al div que será colapsado/expandido.

También falta cerrar las etiquetas <a> dentro de los <li>.

2
  • Muchas gracias! En estos dias lo pruebo, muchas gracias!!
    – Roxy012
    Commented el 26 sept. 2023 a las 0:25
  • A las órdenes @Roxy012, no olvides si esto resuelve el problema marcar la pregunta como resuelta, de esa manera no quedará abierta para siempre y la gente sabrá que es una solución viable si pregunta por un problema similar. Commented el 27 sept. 2023 a las 17:23

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.