Accordion
Angular Bootstrap Accordion
Angular Bootstrap Accordion organizes content within collapsable items. They can toggle through a number of text blocks with a single click. This property allows for an excellent user experience.
Applications of Angular Bootstrap Accordion are:
FAQ page
Multiple items presentation
Data tables
Importing the Angular Bootstrap AccordionModule
import {AccordionModule } from 'cdbangular';
Default Accordion
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 Reference: Contrast Accordion Bootstrap Modules
This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Accordion component. You will find out what these props do, their default values, and how you would use them in your code.
The table below lists the prop options of the CDBAccordion
component to personalize your Accordion.
Name | Type | Default | Description | Example |
---|---|---|---|---|
accordionClass | String | Adds custom classes | [accordionClass]="myClass" | |
accordionHeaderClass | String | Adds custom classes for the accordion header | [accordionHeaderClass]="myHeaderClass" | |
accordionBodyClass | String | Adds custom classes for the accordion body | [accordionBodyClass]="myBodyClass" | |
data | List | Supplies data to the accordion | [data]="data1" | |
hideIcon | Boolean | false | Hides Accordion icon | [hideIcon]=true |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast