0

Estoy trabajando en Ionic 6 / Angular. He creado un componente accordeon con bootstrap 4 y css nativo. No me había percatado de que al duplicar este componente y querer abrir sólo uno de los accordeon se abren de igual manera los demás. No sé como hacer que cada accordeon sea independiente y no suceda esto ya que cada uno tendrá información diferente.

Intenté igual usar la libreria igniteui-angular pero no sé el por qué los estilos no se aplican, el funcionamiento es correcto pero los estilos no. No sé si se deba a que es una librería Angular y con Ionic se crea este pequeño conflicto.

.accordion{
  padding: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Niveles -->
<!-- ============================================================== -->*/
#titulo-1{
  padding: 0px;
}
.boton-1{
  width: 100%;
  height: 50px;
  color: #D2EBE2;
  background: #36375E;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-1:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-1 h5{
  width: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-1 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#nivel{
  padding: 0px 20px;
  margin-top: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Módulos -->
<!-- ============================================================== -->*/
#titulo-2{
  padding: 0px;
  margin: 1px;
}
.boton-2{
  width: 100%;
  height: 40px;
  color: #D2EBE2;
  background: #36375E;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-2:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-2 h5{
  font-size: 1em;
  width: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-2 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#modulo{
  padding: 0px 20px;
  margin-top: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Partes -->
<!-- ============================================================== -->*/
#titulo-3{
  padding: 0px;
  margin: 1px;
}
.boton-3{
  width: 100%;
  height: 40px;
  color: #D2EBE2;
  background: #36375E;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-3:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-3 h5{
  font-size: 1em;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-3 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#partes{
  padding: 0px;
  background: #F1F1F1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- ============================================================== -->
<!-- Niveles - Acordeon -->
<!-- ============================================================== -->
<div class="accordion" id="niveles-acordeon">


  <!-- ============================================================== -->
  <!-- Niveles - Titulo -->
  <!-- ============================================================== -->
  <div class="card-header" id="titulo-1">
    <button
    class="boton-1"
    type="button"
    data-toggle="collapse"
    data-target="#nivel"
    aria-expanded="true"
    aria-controls="nivel"
    >
      <h5>Nivel</h5>
      <i class="fa-solid fa-chevron-down"></i>
    </button>
  </div>


  <!-- ============================================================== -->
  <!-- Niveles - Contenido -->
  <!-- ============================================================== -->
  <div
    id="nivel"
    class="collapse "
    aria-labelledby="titulo-1"
    data-parent="#niveles-acordeon"
  >


    <!-- ============================================================== -->
    <!-- Módulos - Acordeon -->
    <!-- ============================================================== -->
    <div class="accordion" id="modulo-acordeon">


      <!-- ============================================================== -->
      <!-- Módulos - Titulo -->
      <!-- ============================================================== -->
      <div class="card-header" id="titulo-2">
        <button
        class="boton-2"
        type="button"
        data-toggle="collapse"
        data-target="#modulo"
        aria-expanded="true"
        aria-controls="modulo"
        >
          <h5>Módulo</h5>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
      </div>


      <!-- ============================================================== -->
      <!-- Módulos - Contenido -->
      <!-- ============================================================== -->
      <div
        id="modulo"
        class="collapse "
        aria-labelledby="titulo-2"
        data-parent="#modulo-acordeon"
      >


        <!-- ============================================================== -->
        <!-- Partes - Acordeon -->
        <!-- ============================================================== -->
        <div class="accordion" id="partes-acordeon">


          <!-- ============================================================== -->
          <!-- Partes - Titulo -->
          <!-- ============================================================== -->
          <div class="card-header" id="titulo-3">
            <button
            class="boton-3"
            type="button"
            data-toggle="collapse"
            data-target="#partes"
            aria-expanded="true"
            aria-controls="partes"
            >
              <h5>Partes</h5>
              <i class="fa-solid fa-chevron-down"></i>
            </button>
          </div>


          <!-- ============================================================== -->
          <!-- Partes - Contenido -->
          <!-- ============================================================== -->
          <div
            id="partes"
            class="collapse "
            aria-labelledby="titulo-3"
            data-parent="#partes-acordeon"
          >


            <!-- ============================================================== -->
            <!-- Card -->
            <!-- ============================================================== -->
            <div class="card-body">

              <!-- ============================================================== -->
              <!-- Ejercicios - Lista -->
              <!-- ============================================================== -->
              <div class="row">
                <a href="#" class="col-6">1.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">2.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">3.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">4.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">5.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">6.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">7.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">8.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">9.- Nivel 1 (N1) 1-36</a>
                <a href="#" class="col-6">10.- Nivel 1 (N1) 1-36</a>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Actualización:

Componente vista:

<ion-content class="">
  <div class="content-fluid contenedor-principal">

    <app-acordeon></app-acordeon>
    <app-acordeon></app-acordeon>
    <app-acordeon></app-acordeon>

  </div>
</ion-content>

El problema al que me refiero es al momento de usar el componente accordeon en otra vista de ionic/angular. En este caso he duplicado 3 veces el componente (Las duplico para simular que se le ha pasado datos al accordeon y esos datos eran 3 objetos con su respectiva info), lo que sucede es que al querer abrir el accordeon 1 los demás se abren de igual manera.

Img1 introducir la descripción de la imagen aquí

Img2 introducir la descripción de la imagen aquí

5
  • A mí me funciona bien
    – Yussef
    Commented el 15 mar. 2023 a las 20:51
  • @Yussef Tengo una vista llamada programa, ahí uso este componente acordeon, al duplicarlos sucede el problema que comento, de que al abrir un Nivel, los otros Niveles también se abren.
    – Carlos
    Commented el 15 mar. 2023 a las 21:07
  • 1
    Pero que quieres que te diga, yo solo puedo ayudarte en base a lo que tu presentas. Este código lo copie, añadí el boostrap 4 y funciona correctamente. Cada nivel abre su propio nivel
    – Yussef
    Commented el 15 mar. 2023 a las 21:10
  • He añadido boostrap 4 al ejemplo en tu pregunta, para que veas que funciona correctamente
    – Yussef
    Commented el 15 mar. 2023 a las 21:14
  • @Yussef He añadido unas imagenes, para ver si se entiende mejor la situación.
    – Carlos
    Commented el 15 mar. 2023 a las 21:34

1 respuesta 1

1

Tienes que agregar Id's distintas a cada elemento, el acordeon en bootstrap se forma de esta manera:

introducir la descripción de la imagen aquí

El botón que abre/oculta tiene un atributo data-target en el cual va la ID del contenido. Y en el contenido va la id del padre de todo

Entiendo que estas generando los ítems de manera dinámica, entonces si no tuvieras un ID, puedes agregar el índex del array como sufijo

Ejemplo:

.accordion{
  padding: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Niveles -->
<!-- ============================================================== -->*/
#titulo-1{
  padding: 0px;
}
.boton-1{
  width: 100%;
  height: 50px;
  color: #D2EBE2;
  background: #36375E;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-1:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-1 h5{
  width: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-1 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#nivel{
  padding: 0px 20px;
  margin-top: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Módulos -->
<!-- ============================================================== -->*/
#titulo-2{
  padding: 0px;
  margin: 1px;
}
.boton-2{
  width: 100%;
  height: 40px;
  color: #D2EBE2;
  background: #36375E;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-2:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-2 h5{
  font-size: 1em;
  width: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-2 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#modulo{
  padding: 0px 20px;
  margin-top: 0px;
}


/*<!-- ============================================================== -->
<!-- Estilos - Partes -->
<!-- ============================================================== -->*/
#titulo-3{
  padding: 0px;
  margin: 1px;
}
.boton-3{
  width: 100%;
  height: 40px;
  color: #D2EBE2;
  background: #36375E;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-top: 7px;
}
.boton-3:hover{
  background: #D3DF4E;
  color: #00013A;
}
.boton-3 h5{
  font-size: 1em;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: start;
  align-items: center;

  margin-left: 20px;
}
.boton-3 i{
  font-size: 1.2em;
  margin-top: -7px;
  margin-right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}
#partes{
  padding: 0px;
  background: #F1F1F1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="accordion" id="niveles-acordeon">
    <div class="card">
        <div class="card-header" id="titulo-1">
            <button class="boton-1"
                    type="button"
                    data-toggle="collapse"
                    data-target="#nivel1"
                    aria-expanded="true"
                    aria-controls="nivel">
                <h5>Nivel</h5>
                <i class="fa-solid fa-chevron-down"></i>
            </button>
        </div>
        <div id="nivel1"
             class="collapse "
             aria-labelledby="titulo-1"
             data-parent="#niveles-acordeon">
            <div class="accordion" id="modulo-acordeon">
                <div class="card-header" id="titulo-2">
                    <button class="boton-2"
                            type="button"
                            data-toggle="collapse"
                            data-target="#modulo1"
                            aria-expanded="true"
                            aria-controls="modulo">
                        <h5>Módulo</h5>
                        <i class="fa-solid fa-chevron-down"></i>
                    </button>
                </div>
                <div id="modulo1"
                     class="collapse "
                     aria-labelledby="titulo-2"
                     data-parent="#modulo-acordeon">
                    <div class="accordion" id="partes-acordeon">
                        <div class="card-header" id="titulo-3">
                            <button class="boton-3"
                                    type="button"
                                    data-toggle="collapse"
                                    data-target="#partes1"
                                    aria-expanded="true"
                                    aria-controls="partes">
                                <h5>Partes</h5>
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                        </div>
                        <div id="partes1"
                             class="collapse "
                             aria-labelledby="titulo-3"
                             data-parent="#partes-acordeon">
                            <div class="card-body">
                                <div class="row">
                                    <a href="#" class="col-6">1.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">2.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">3.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">4.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">5.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">6.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">7.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">8.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">9.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">10.- Nivel 1 (N1) 1-36</a>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="titulo-1">
            <button class="boton-1"
                    type="button"
                    data-toggle="collapse"
                    data-target="#nivel2"
                    aria-expanded="true"
                    aria-controls="nivel">
                <h5>Nivel</h5>
                <i class="fa-solid fa-chevron-down"></i>
            </button>
        </div>
        <div id="nivel2"
             class="collapse "
             aria-labelledby="titulo-1"
             data-parent="#niveles-acordeon">
            <div class="accordion" id="modulo-acordeon">
                <div class="card-header" id="titulo-2">
                    <button class="boton-2"
                            type="button"
                            data-toggle="collapse"
                            data-target="#modulo2"
                            aria-expanded="true"
                            aria-controls="modulo">
                        <h5>Módulo</h5>
                        <i class="fa-solid fa-chevron-down"></i>
                    </button>
                </div>
                <div id="modulo2"
                     class="collapse "
                     aria-labelledby="titulo-2"
                     data-parent="#modulo-acordeon">
                    <div class="accordion" id="partes-acordeon">
                        <div class="card-header" id="titulo-3">
                            <button class="boton-3"
                                    type="button"
                                    data-toggle="collapse"
                                    data-target="#partes2"
                                    aria-expanded="true"
                                    aria-controls="partes">
                                <h5>Partes</h5>
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                        </div>
                        <div id="partes2"
                             class="collapse "
                             aria-labelledby="titulo-3"
                             data-parent="#partes-acordeon">
                            <div class="card-body">
                                <div class="row">
                                    <a href="#" class="col-6">1.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">2.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">3.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">4.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">5.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">6.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">7.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">8.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">9.- Nivel 1 (N1) 1-36</a>
                                    <a href="#" class="col-6">10.- Nivel 1 (N1) 1-36</a>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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.