CODEWITHSUNDEEP
htmlcssangular8
Sonal
Sonal

Reputation: 188

Angular 8 accordion with Dynamic data without using bootstrap/angular material

I am trying to implement accordion functionality without using bootstrap/angular material accordion. My data is coming dynamically from an api.

I tried doing below but that opens and closes all the panels together. I understand the reason behind it but I don't understand how to approach.

Component.ts

export class AccordionComponent implements OnInit {
    isHidden = true;
    mFaqs: IFaq[];
    constructor(private faqService: FaqService) { }

    ngOnInit() {
        this.faqService.getFaqs()
            .subscribe(faqData => this.mFaqs = faqData );
    }

}

component.html

<div class="custom-header" hideToggle="true" (click)="isHidden = !isHidden" *ngFor="let faq of mFaqs?.faqs">
    <section>
        <section>
            Q: {{ faq.question }}
        </section>
        <p [hidden]="isHidden">
            {{ faq.answer }}
        </p>
    </section>

</div>

It should only close/open the clicked one.

Upvotes: 2

Views: 3109

Answers (1)

Sourav Raj
Sourav Raj

Reputation: 159

You need to pass unique id for that.

Might be it'll help you.

Angular on click event for multiple items

please go through it.

Upvotes: 3

Related Questions