Accordion

Angular Bootstrap Accordion is a component which organizes content within collapsable items. Accordion shows only one collapsed item per time.

Accordions can toggle through a number of text blocks with a single click, and that greatly increases the user experience of your project.

Examples of Angular Bootstrap Accordion use case:

• Data tables

• Multiple items presentation

• FAQ page

Examples

Default Accordion example.

Typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
})
export class AccordionComponent implements OnInit {
  paragraph = `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
  aesthetic synth nesciunt you probably haven't heard of them accusamus
  labore sustainable VHS.`;
  data = [
    {
      title: 'Accordion 1',
      content: this.paragraph,
    },
    {
      title: 'Accordion 2',
      content: this.paragraph,
    },
    {
      title: 'Accordion 3',
      content: this.paragraph,
    },
    {
      title: 'Accordion 4',
      content: this.paragraph,
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

html

<CDBAccordion [data]='data' ></CDBAccordion>

Accordion without Icon

Typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
})
export class AccordionComponent implements OnInit {
  paragraph = `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
  aesthetic synth nesciunt you probably haven't heard of them accusamus
  labore sustainable VHS.`;
  data = [
    {
      title: 'Accordion 1',
      content: this.paragraph,
    },
    {
      title: 'Accordion 2',
      content: this.paragraph,
    },
    {
      title: 'Accordion 3',
      content: this.paragraph,
    },
    {
      title: 'Accordion 4',
      content: this.paragraph,
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

HTML

        <CDBAccordion [data]='data' [hideIcon]=true ></CDBAccordion>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of the accordion component.

Contrast Accordion Bootstrap Modules used

import {AccordionModule } from 'cdbangular';

API Reference: Contrast Accordion Bootstrap Inputs

The table below shows the possible inputs of the Accordion component.