🤩
Windframe Import Update is finally here.

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

typescript
import {AccordionModule } from 'cdbangular';

Default Accordion

Angular Bootstrap Default Accordion

Typescript
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
html
<CDBAccordion [data]='data' ></CDBAccordion>

Accordion without Icon

Angular Bootstrap Accordion with Icons

Typescript
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
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.

NameTypeDefaultDescriptionExample
accordionClassStringAdds custom classes[accordionClass]="myClass"
accordionHeaderClassStringAdds custom classes for the accordion header[accordionHeaderClass]="myHeaderClass"
accordionBodyClassStringAdds custom classes for the accordion body[accordionBodyClass]="myBodyClass"
dataListSupplies data to the accordion[data]="data1"
hideIconBooleanfalseHides 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

ad-banner

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