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",
azAccordionSlideDown: 100,
azAccordionSlideUp: 100,
azAccordionIconClosed: "fas fa-plus",
azAccordionIconOpen: "fas fa-minus",
azAccordionHeaderBackgroundColor: "",
azAccordionHeaderColor: "",
azAccordionHeaderHoverBackgroundColor: "",
azAccordionHeaderHoverColor: "",
azAccordionArticleBackgroundColor: "",
azAccordionArticleColor: ""
});

Init AZAccordion

There are two ways to initiate the AZAccordion. The way you choose is important for further use of the function.

1. new AZAccordion();
The function is initiated but you do not assign the function to a variable. This means you can use the azAccordionReady function in relation to further interaction with the function.

2. var AZAccordion = new AZAccordion();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.

Additional Features

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

1. functionlib/azAccordionReady

$.subscribe("functionlib/azAccordionReady", function (e, data)
{
data.azSelectAccordion(0);
});

2. var AZAccordion

AZAccordion.azSelectAccordion(0);

You also have the option to replace the content of the AZAccordion.

1. functionlib/azAccordionReady

$.subscribe("functionlib/azAccordionReady", function (e, data)
{
data.azChangeText(0, "This is a text");
});

2. var AZAccordion

AZAccordion.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"

azAccordionSlideDown Type: Integer Default: 100 Unit: milliseconds

azAccordionSlideUp Type: Integer Default: 100 Unit: milliseconds

azAccordionIconClosed Type: String Default: "fas fa-plus"

azAccordionIconOpen Type: String Default: "fas fa-minus"

azAccordionHeaderBackgroundColor Type: Color Hex Default: ""
See also CSS .az-accordion

azAccordionHeaderColor Type: Color Hex Default: ""
See also CSS .az-accordion

azAccordionHeaderHoverBackgroundColor Type: Color Hex Default: ""
See also CSS .az-accordion

azAccordionHeaderHoverColor Type: Color Hex Default: ""
See also CSS .az-accordion

azAccordionArticleBackgroundColor Type: Color Hex Default: ""
See also CSS .az-accordion

azAccordionArticleColor Type: Color Hex Default: ""
See also CSS .az-accordion

functionlib/azAccordionReady Type: Function

$.subscribe("functionlib/azAccordionReady", function (e, data)
{
data.azAccordionId
data.azSelectAccordion - ƒ (n)
data.azChangeText - ƒ (n, i)
});

This function is triggered when AZAccordion is fully initiated.

functionlib/azAccordionHeader Type: Function

$.subscribe("functionlib/azAccordionHeader", function (e, data)
{
data.azAccordionId - your id
data.azAccordionStatus - open/closed
data.azAccordionActivated - index
data.azAccordionDeactivated - index
data.azAccordionHeaderJQElement - i.fn.init
});

This function is triggered every time you open/close the AZAccordion.

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 CSS Team

/*---------------------
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;
background-color: #0078D7;
color: #FFFFFF;
}

.az-accordion > .az-accordion-card > header:hover
{
background-color: #0bb2d4;
color: #FFFFFF;
}

.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;
background-color: #FFFFFF;
color: #000000;
}

.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
{
}