Estoy construyendo un acordeón en Angular 2 y lo que quiero lograr es cuando hago clic en uno de los acordeones, el acordeón se abrirá y todos los demás acordeones abiertos se cerrarán (así que básicamente se cerrará el acordeón abierto previamente). Sin manipulación DOM.
Cómo estoy haciendo esto ahora: tengo un tipo booleano llamado 'classActive' que cambio a verdadero o falso al hacer clic.
(nota: el acordeón se repite usando ngFor )
HTML
<div class="accordion" [ngClass]="{'is-active' : classActive}"> <div class="accordion__container"> <div class="accordion__header" (click)="toggleClass($event)"> <h2 class="accordion__heading">{{ name }}</h2> </div> <div class="accordion__content"> {{ content }} </div> </div> </div>JS
@Component({ selector: 'accordion', templateUrl: './accordion.component.html', styleUrls: ['./accordion.component.scss'] }) export class AccordionComponent implements OnInit { classActive: boolean = false; toggleClass(event) { event.preventDefault(); this.classActive = !this.classActive; } }SCSS
.accordion { height: 100px; overflow: hidden; transition: height .3s cubic-bezier(1, 0, .41, 1.01); &.is-active { height: 200px; .accordion__content { opacity: 1; } } &__header { cursor: pointer; height: 100px; padding: 0 $p-container; position: relative; } &__heading { text-transform: lowercase; line-height: 100px; pointer-events: none; } &__content { opacity: 0; transition: opacity .6s; padding: $p-container; } }Creo que la solución sería establecer todo 'classActive' en falso y luego establecer el clic en verdadero. ¿Pero es eso posible?
El problema, como se menciona en los comentarios, es que ha creado una sola variable para manejar varios elementos.
En mi humilde opinión, la solución más simple es modificar su function para "guardar" el índice actual en el que se hizo clic como se muestra a continuación:
Componente:
activeIndex: number = 0; // The accordion at index 0 will be open by default toggleClass(i: number): void { this.activeIndex = i; } Entonces, en su plantilla, puede modificar su [ngClass] para:
[ngClass]="{'is-active': activeIndex === i}"Modelo:
<div *ngFor="let yourVariable of yourArray, let i = index"> <div class="accordion" [ngClass]="{'is-active': activeIndex === i}"> <div class="mood__container"> <div class="mood__header" (click)="toggleClass(i)"> <h2 class="mood__heading">{{ name }}</h2> </div> <div class="accordion__container> {{ content }} </div> </div> </div> </div>Revisa el código completo a continuación:
[ngClass]="{'is-active' : activeIndex === i, 'is-dactive' : activeIndex != i}"> togglePopover(event, i: number) { event.preventDefault(); this.activeIndex = i console.log(this.activeIndex); }