Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haztivity/hz-accordion
Resource for haztivity to create accordions.
https://github.com/haztivity/hz-accordion
courses haztivity hz-accordion jquery jquery-ui typescript
Last synced: 10 days ago
JSON representation
Resource for haztivity to create accordions.
- Host: GitHub
- URL: https://github.com/haztivity/hz-accordion
- Owner: haztivity
- License: mit
- Created: 2017-05-29T09:34:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-20T09:22:54.000Z (over 6 years ago)
- Last Synced: 2024-04-25T15:03:21.980Z (7 months ago)
- Topics: courses, haztivity, hz-accordion, jquery, jquery-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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](https://jqueryui.com/accordion/) under the hood.
## Install
### NPM
```npm i --save @haztivity/hz-accordion```
## Dependencies
- JQuery
- JQuery UI accordion
- @haztivity/core
## Usage
1. Import @haztivity/hz-accordion
2. Add HzAccordionResource to the page
3. Create the accordion and set ```data-hz-resource="HzAccordion"```
### Ts
```typescript
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
```jade
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
```html
Title 1
Content 1
Title 2
Content 2
Title 3
Content 3
```
## 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
```jade
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
```html
Title 1
Content 1
Title 2
Content 2
Title 3
Content 3
```
## Options
All the options of jquery ui accordion **except** functions could be specified by attributes using:
```jade
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
```jade
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
```html
Title 1
Content 1
Title 2
Content 2
Title 3
Content 3
```