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.