@haztivity/hz-accordion
v0.7.0
Published
Accordion resource
Downloads
5
Readme
hz-accordion
hz-accordion allows to create accordions as resources with all the advatages of an haztivity resource.
hz-accordion uses jquery ui accordion under the hood.
Install
NPM
npm i --save @haztivity/hz-accordion
Dependencies
- JQuery
- JQuery UI accordion
- @haztivity/core
Usage
- Import @haztivity/hz-accordion
- Add HzAccordionResource to the page
- Create the accordion and set
data-hz-resource="HzAccordion"
Ts
import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzAccordionResource} from "@haztivity/hz-accordion";
export let page: PageRegister = PageFactory.createPage(
{
name: "myPage",
resources: [
HzAccordionResource
],
template: template
}
);
Pug
div(data-hz-resource="HzAccordion")
h3 Title 1
div Content 1
h3 Title 2
div Content 2
h3 Title 3
div Content 3
or
HTML
<div data-hz-resource="HzAccordion">
<h3>Title 1<h3>
<div>Content 1</div>
<h3>Title 2<h3>
<div>Content 2</div>
<h3>Title 3<h3>
<div>Content 3</div>
</div>
Sequence
By default, the panels require being activated sequentially, to activate the 3rd panel the 2nd must have been activated before.
It's possible disable this behavior using the attribute data-opt-hz-accordion-sequential
Pug
div(data-hz-resource="HzAccordion" data-opt-hz-accordion-sequential="false")
h3 Title 1
div Content 1
h3 Title 2
div Content 2
h3 Title 3
div Content 3
or
HTML
<div data-hz-resource="HzAccordion" data-opt-hz-accordion-sequential="false">
<h3>Title 1<h3>
<div>Content 1</div>
<h3>Title 2<h3>
<div>Content 2</div>
<h3>Title 3<h3>
<div>Content 3</div>
</div>
Options
All the options of jquery ui accordion except functions could be specified by attributes using:
data-opt-accordion-[option]=[value]
If the option have multiple words, use dashes, for example heightStyle
have to be provided as height-style
Examples:
Pug
div(data-hz-resource="HzAccordion"
data-opt-accordion-collapsible="true"
data-opt-accordion-active="false"
data-opt-accordion-header=">.hz-accordion__panel-wrapper > .hz-accordion__header")
div.hz-accordion__panel-wrapper
h3.hz-accordion__header Title 1
div.hz-accordion__panel
Content 1
div.hz-accordion__panel-wrapper
h3.hz-accordion__header Title 1
div.hz-accordion__panel
Content 1
div.hz-accordion__panel-wrapper
h3.hz-accordion__header Title 1
div.hz-accordion__panel
Content 1
or
HTML
<div data-hz-resource="HzAccordion"
data-opt-accordion-collapsible="true"
data-opt-accordion-active="false"
data-opt-accordion-header=">.hz-accordion__panel-wrapper >.hz-accordion__header">
<div class="hz-accordion__panel-wrapper">
<h3 class="hz-accordion__header">Title 1</h3>
<div class="hz-accordion__panel">
<Content>Content 1</Content>
</div>
</div>
<div class="hz-accordion__panel-wrapper">
<h3 class="hz-accordion__header">Title 2</h3>
<div class="hz-accordion__panel">
<Content>Content 2</Content>
</div>
</div>
<div class="hz-accordion__panel-wrapper">
<h3 class="hz-accordion__header">Title 3</h3>
<div class="hz-accordion__panel">
<Content>Content 3</Content>
</div>
</div>
</div>