angularx-accordion

Accordion Accordion

Installation Steps

1. Install npm module:

   npm i angularx-accordion --save

2. In your app.module.ts file

       import { AccordionModule } from 'angularx-accordion';
       imports: [
         AccordionModule
       ],

3. In your app.component.ts file

       import { AccordionComponent } from 'angularx-accordion';
       import {AccordionToggleComponent } from 'angularx-accordion';
       import { Accordion } from 'angularx-accordion/accordion'; 

   if you are using variation 1 or 2 then also add following lines

     declare var require: any;
     const accordionJSON = require('[PATH TO YOUR STRUCTURED JSON]'); 
   

4. In your Styles.scss file

     @import '~angularx-accordion/accordion.component';
     $screen-md : 992px;
     @include ngxAccordion();

Description

The accordion module will contain descriptions about products and features with a header and subheader It can also contain modules that can be dyanmically injected into it. same applies to the expander variant of it.

Variations

This module contains three variants: 1. Accordion 2. Expander 3. Accordion as functionality

In accordions if one accordion is open all other accordions will be closed,

Link to the json

The json data for the accordion and its variants is at Accordion-json

---

Variation 1 json

---

  var accordion = {
  "module": {
    "variantID": "1"
  },
  "content": [
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    }
  ]
}

Variation 1 usage

---

<ngx-accordion [data]="accordion"></ngx-accordion>

---

Variation 2 json

var expander = {
  "module": {
    "variantID": "2"
  },
  "content": [
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    {
      "header": "H4 copy secondary header 22px",
      "content": "p copy 14 px Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    }
  ]
}

---

Variation 2 usage

---

<ngx-accordion [data]="expander"></ngx-accordion>

---

Variation 4 json

---

      No JSON | using tags

---

Variation 4 usage

---

    <ngx-accordion>
        This is a outer header
        <ngx-accordion-container>
            <div class="ngx-accordion-header">
                <span>Accordion Header 1</span>
                <button>
                    <ngx-accordion-toggle>Custom clickable heading</ngx-accordion-toggle>
                </button>
            </div>
            <div class="ngx-accordion-body">
                <div>Accordion body 1</div>
            </div>
        </ngx-accordion-container>
        <ngx-accordion-container>
            <div class=" ngx-accordion-header ">
                <div>Accordion Header 2</div>
            </div>
            <div class="ngx-accordion-body">
                <div>Accordion body 2</div>
            </div>
    </ngx-accordion

---

live Example here: https://sirius93.github.io/angular-accordion/ github page here : https://github.com/sirius93/angular-accordion