How to implement accordion in angular2 and typescript

Question

I am creating list of div dynamically.I want the content of only fist div will display by default.But when user click on second div then content of second should be display and the content of first is hide.And so on with third and forth div.

This is like accordion.Here is my code

<div class="content-area">
  <div class="container-fluid">
    <div class="accordian">
        <div class="errors-cont" *ngFor="#error of errors">
            <div class="acc-header active" (click)="onClick()">
                <div class="image"><img src="image2/nike.png"></div>
                <div class="text">
                <div class="title">Nike<span>20-04-2016,  03:10 PM</span></div>
                <p>{{error.title}}</p>
                </div>
            </div>
            <div class="acc-desc" [class.hide]="isSpecial">
                <div class="image"></div>
                <div class="text">
                <p>{{error.desc}}</p>
                <div class="acc-block">
                    <div class="title">ERROR TYPE asdf</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="title">REASON</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="btns">
                    <input name="" type="button" value="RESOLVE" class="transparent">
                    <input name="" type="button" value="IGNORE" class="green">
                    </div>
                </div>
                </div>
            </div>
        </div><!-- end or ngFor loop -->     
    </div>
  </div>
</div>

import {Component} from '@angular/core';
import {HeroService} from './error.service';

import { ROUTER_DIRECTIVES } from '@angular/router';
import {CORE_DIRECTIVES} from '@angular/common';
import {DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'errors-view',
    templateUrl: 'errors-view.html',
    providers: [HeroService],
    styleUrls: ['errors.css'],
    directives: [DROPDOWN_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class ErrorsViewComponent {

    errors:string[] = [];
    isClose = true;
    isActive= false;
    isSpecial= false;

    //disValue = true
    constructor(private heroService:HeroService) {
        heroService.loadItems()
            .subscribe(data => this.errors = data);
        console.log('erros will be shown in this page');
    }

    togglePopover() {
        this.isClose = !this.isClose;
    }

    onClick(){
        this.isActive = true;
        this.isSpecial = true;
        //this.disValue = false;
        console.log("active false");

        //var x = document.getElementsByClassName("acc-header");

            console.log(x.length);
        // for (var i=0; i < x.length; i++) {
        //  x[i].onclick = function() {deleteIt(this)}

        // }



    }
}

Solution 1

PS:- as Alternate

If you want to use Accordion then why not to use this ?

http://www.primefaces.org/primeng/#/accordion

PrimeNg provides us all the functionaly needed you just have to add this

import {Accordion} from 'primeng/primeng';
import {AccordionTab} from 'primeng/primeng';

Solution 2

Use the index to add the 'active' class if it's the first one.

*ngFor="#error of errors; let i=index"

div class="acc-header" [class.active]="i == 0" (click)="onClick(i)"