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

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

Accordion without Icon

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.

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

Sections

Alert