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
var azAccordion = new initAZAccordion(
{
    azAccordionId: "",
    azAccordionHeightStyle: "content",
    azAccordionCollapsible: true,
    azAccordionOpenEvent: "click",
    azAccordionHeaderBackgroundColor: "#009688",
    azAccordionHeaderColor: "#FFFFFF",
    azAccordionHeaderHoverBackgroundColor: "#607d8b",
    azAccordionHeaderHoverColor: "#FFFFFF",
    azAccordionArticleBackgroundColor: "#FFFFFF",
    azAccordionArticleColor: "#000000",
    azAccordionIconClosed: "fas fa-plus",
    azAccordionIconOpen: "fas fa-minus",
    azAccordionSlideDown: 100,
    azAccordionSlideUp: 100
});

Hvis du ønsker å bruke egne knapper eller linker til å åpne/lukke din AZAccordion, bruker du JavaScript funksjonen under.

azAccordion.azSetAccordion(0);














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: "009688"
Se også CSS .az-accordion
azAccordionHeaderColor Type: Color Hex Default: "FFFFFF"
Se også CSS .az-accordion
azAccordionHeaderHoverBackgroundColor Type: Color Hex Default: "607d8b"
Se også CSS .az-accordion
azAccordionHeaderHoverColor Type: Color Hex Default: "FFFFFF"
Se også CSS .az-accordion
azAccordionArticleBackgroundColor Type: Color Hex Default: "FFFFFF"
Se også CSS .az-accordion
azAccordionArticleColor Type: Color Hex Default: "000000"
Se også 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/azAccordionActivate Type: Function
$.subscribe("functionlib/azAccordionActivate", function (e, data)
{
    data.azAccordionId
    data.azAccordionStatus
    data.azAccordionActivated
    data.azAccordionDeactivated
});

functionlib/azAccordionHeader Type: Function
$.subscribe("functionlib/azAccordionHeader", function (e, data)
{
    data.azAccordionId
    data.azAccordionHeaderJQElement
});

AZ Accordion HTML og 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>


HEADER og ARTICLE tilføres en CSS klasse når en AZAccordion er aktiv.

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


AZAccordion har noe grunnleggende CSS som det i utgangspunktet ikke skal være nødvendig å justere på. accordion.css
CSS som du selv kan endre, finenr du i filen standard.css

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

.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-card > header
{
    padding: 7px;
}

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

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

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

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

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

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