AZ Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AZ Accordion

Default settings

new AZAccordion(
{
    azAccordionId: "",
    azAccordionHeightStyle: "content",
    azAccordionCollapsible: true,
    azAccordionOpenEvent: "click",
    azAccordionHeaderBackgroundColor: "#0078D7",
    azAccordionHeaderColor: "#FFFFFF",
    azAccordionHeaderHoverBackgroundColor: "#0bb2d4",
    azAccordionHeaderHoverColor: "#FFFFFF",
    azAccordionArticleBackgroundColor: "#FFFFFF",
    azAccordionArticleColor: "#000000",
    azAccordionIconClosed: "fas fa-plus",
    azAccordionIconOpen: "fas fa-minus",
    azAccordionSlideDown: 100,
    azAccordionSlideUp: 100
});

Additional Features

If you want to use your own buttons or links to open/close the AZAccordion, use the function below.

azSelectAccordion(0);


You also have the option to replace the contents of the AZAccordion, by using the function below.

azChangeText(0, "This is a text");

The first parameter, (Index) corresponds to the number of which AZAccordion "header" you want to interact with. The last parameter is the content itself.




azAccordionId Type: String Default: ""
azAccordionHeightStyle Type: String Default: "content" Values: "content" or "auto"
azAccordionCollapsible Type: Boolean Default: true Values: true or false
azAccordionOpenEvent Type: String Default: "click" Values: "click" or "mouseover"
azAccordionHeaderBackgroundColor Type: Color Hex Default: "0078D7"
See also CSS .az-accordion
azAccordionHeaderColor Type: Color Hex Default: "FFFFFF"
See also CSS .az-accordion
azAccordionHeaderHoverBackgroundColor Type: Color Hex Default: "607D8B"
See also CSS .az-accordion
azAccordionHeaderHoverColor Type: Color Hex Default: "FFFFFF"
See also CSS .az-accordion
azAccordionArticleBackgroundColor Type: Color Hex Default: "FFFFFF"
See also CSS .az-accordion
azAccordionArticleColor Type: Color Hex Default: "000000"
See also CSS .az-accordion
azAccordionIconClosed Type: String Default: "fas fa-plus"
azAccordionIconOpen Type: String Default: "fas fa-minus"
azAccordionSlideDown Type: Integer Default: 100 Unit: milliseconds
azAccordionSlideUp Type: Integer Default: 100 Unit: milliseconds
functionlib/azAccordionHeader Type: Function
$.subscribe("functionlib/azAccordionHeader", function (e, data)
{
    data.azAccordionId
    data.azAccordionStatus
    data.azAccordionActivated
    data.azAccordionDeactivated
    data.azAccordionHeaderJQElement
});

This feature is triggered every time you click, (open/close) the AZAccordion. By subscribing to the feature, you will get a better flow in your own code.

AZ Accordion HTML and CSS

<div class="az-accordion" id="az-accordion-1">
    <div class="az-accordion-card">
        <header>
            <h1>AZ Accordion 1</h1>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </article>
    </div>
</div>


A CSS class is added to HEADER and ARTICLE when the AZAccordion is active.

<header class="az-accordion-header-active">
<article class="az-accordion-article-active">


AZAccordion has some basic CSS that you should not initially need to adjust. accordion.css
You can find the CSS which you can change yourself in the file standard.css

/*---------------------
Accordion
accordion.css
---------------------*/

.az-accordion
{
    display: block;
    position: relative;
}

.az-accordion > .az-accordion-card
{
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.az-accordion > .az-accordion-card > header
{
    padding: 7px;
}

.az-accordion > .az-accordion-card > header > *
{
    font-size: 14px;
}

.az-accordion > .az-accordion-card > header > i
{
    font-size: 12px;
    margin-right: 2px;
    margin-top: 4px;
}

.az-accordion > .az-accordion-card > article
{
    padding: 7px;
}

.az-accordion > .az-accordion-card > article > *
{
    font-size: 14px;
}

.az-accordion > .az-accordion-card > header.az-accordion-header-active
{
}

.az-accordion > .az-accordion-card > header.az-accordion-article-active
{
}