Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justeat/f-toggle
Fozzie vanilla JS toggle library.
https://github.com/justeat/f-toggle
fozzie ui
Last synced: about 1 month ago
JSON representation
Fozzie vanilla JS toggle library.
- Host: GitHub
- URL: https://github.com/justeat/f-toggle
- Owner: justeat
- License: other
- Created: 2017-09-04T14:44:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-12-20T12:36:19.000Z (about 5 years ago)
- Last Synced: 2024-10-30T12:23:26.393Z (about 2 months ago)
- Topics: fozzie, ui
- Language: JavaScript
- Homepage:
- Size: 227 KB
- Stars: 1
- Watchers: 44
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# `f-toggle` :bear:
[](https://badge.fury.io/js/%40justeat%2Ff-toggle)
[](https://travis-ci.org/justeat/f-toggle)
[](https://coveralls.io/github/justeat/f-toggle)
[](https://packagephobia.now.sh/result?p=@justeat/f-toggle)
Fozzie vanilla JS toggle library.
Visibility is set by applying the `is-hidden` class to the target element.
## Adding `f-toggle` to your project
```bash
yarn add @justeat/f-toggle
```
Then, inside your script import and run `f-toggle`.
```js
import toggle from '@justeat/f-toggle';
toggle();
```
## Setting up toggles
To create a toggle add a `data-toggle-target` attribute to the element which is going to trigger the toggle
```html
Trigger toggle
```
Then add a `data-toggle-name` attribute to the element which is going to be toggled
```html
I will be toggled
```
### Showing elements
You can use the `show:` prefix in order to show an element when clicked
```html
Trigger toggle
```
### Hiding elements
You can use the `hide:` prefix in order to hide an element when clicked
```html
Trigger toggle
```
### Multiple toggles
You can specify multiple targets and states by separating them with a space
```html
Trigger toggle
alpha
beta
gamma
delta
```
This will toggle the visibility of `alpha` & `beta`, hide `gamma`, and show `delta`.
### Toggle a custom class
You can specify a custom toggle class by adding the `data-toggle-class` attribute
```html
Trigger toggle
```
In this example the `toggled` class will be applied to the target element (rather than the default `is-hidden` class).
### Accordion
If you require accordion behaviour just wrap your content within an element containing `data-toggle-accordion`.
On clicking a button with `data-toggle-target` the target item will be toggled, and all other elements in the group
are hidden. All accordion sections are hidden by default.
In this instance you are then able to add `data-toggle-class` to the parent, as opposed to each `data-toggle-target`.
```html
```
To expand accordion section by default add `data-toggle-section-expanded` attribute value to the parent element.
```html
```
#### Exclude toggle items from accordion
In the situation you have a toggle item within an accordion element, but you do not want it to adopt the accordion
behaviour, simply add `data-toggle-accordion-exclude`:
```html
```
## Methods
### setToggleCallback
Allows user to run callback when a section is toggled.
#### Arguments
**Selector**
Specify the section or accordion to set a callback on when a `click` event is fired on it
* Type: string | Element
* Example: `.selector`
**Callback**
The callback to be executed on clicking the section
* Type: function
* Example: `() => {
callbackFn();
}`
```javascript
// This would call the callback if any section within the accordion is toggled
setToggleCallback('[data-toggle-accordion]', () => {
callbackFn();
});
// This would call the callback if the section is toggled
setToggleCallback('[data-toggle-target]', () => {
callbackFn();
});
```
### toggleAccordion
Toggles the accordion sections, displaying the section specified and closing all others
#### Arguments
**Selector**
Specify the accordion to toggle
* Type: string
* Example: `.accordion`
**Section**
Specify the name of the section to be shown. This will be the value of the data-toggle-name attribute
* Type: string
* Example: `two`
```javascript
toggleAccordion('.accordion', 'two');
````
### toggleSection
Toggles sections based on the options passed in
#### Arguments
**Options**
Specify the sections to toggle/show/hide
* Type: string
* Example: `hide:one hide:two`
**Class**
Specify the toggle class to be added/removed from sections
* Type: string
* Example: `is-hidden-custom`
```javascript
toggleSection('hide:one hide:two', 'is-hidden-custom');
````
## Running the unit tests
This module is [covered by a suite of unit tests](test). To run them simply run `yarn test` on the command line.