How to implement accordion in angular2 and typescript
<p>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.</p>

<p>This is like accordion.Here is my code</p>

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

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 =&gt; 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 &lt; x.length; i++) {
        //  x[i].onclick = function() {deleteIt(this)}

        // }



    }
}
</code></pre>