https://github.com/damonbauer/stimulus-toggle-util

An on/off toggle utility for Stimulus
https://github.com/damonbauer/stimulus-toggle-util

stimulus stimulus-js stimulusjs toggle

Last synced: about 2 months ago
JSON representation

An on/off toggle utility for Stimulus

• Host: GitHub
• URL: https://github.com/damonbauer/stimulus-toggle-util
• Owner: damonbauer
• License: mit
• Created: 2020-04-13T12:50:08.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T12:01:57.000Z (almost 2 years ago)
• Last Synced: 2024-08-03T16:08:40.602Z (5 months ago)
• Topics: stimulus, stimulus-js, stimulusjs, toggle
• Language: JavaScript
• Size: 1.91 MB
• Stars: 23
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-stimulusjs - stimulus-toggle-util - A simple toggle utility controller to hide/show elements on click. (Packages)

README

        
![npm](https://img.shields.io/npm/dt/stimulus-toggle-util) ![GitHub file size in bytes](https://img.shields.io/github/size/damonbauer/stimulus-toggle-util/src/controllers/toggle_controller.js)

# stimulus-toggle-util

An on/off toggle utility for [Stimulus](https://stimulusjs.org/).

[View a demo.](https://codesandbox.io/s/stimulus-toggle-demo-qelx8)

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [Options](#options)

- [License](#license)

## Installation

```sh

$ yarn add stimulus-toggle-util

```

### Register the Controller

```js

// ./packs/application.js

import { Application } from 'stimulus';

// import Toggle

import Toggle from 'stimulus-toggle-util';

import { definitionsFromContext } from 'stimulus/webpack-helpers';

const application = Application.start();

const context = require.context('../controllers', true, /\.js$/);

application.load(definitionsFromContext(context));

// Manually register `stimulus-toggle-util` as a stimulus controller

application.register('toggle', Toggle);

```

## Usage

1. Attach the controller to an element. Recommended to attach to a top-level container, like `` or `` so it can be used anywhere.

    * **Example:**

    ```html

    ...

    ```

2. Attach an `action` and a `toggle target` to an element that should _perform_ the toggling.

    * **Example:**

    ```html

    Toggle

    ```

    * `data-action="toggle#toggle"`: `toggle` is the `ToggleController`, `#toggle` is the _action_ that is performed when this element is clicked.

3. Attach a `toggle name` to an element that should _be toggled_.

    * **Example:**

    ```html

    ...

    ```

### Toggle a single element

```html

  

    Toggle Sidebar 1

  

      

  

    
Here's "Sidebar 1".

  


```

![1](https://user-images.githubusercontent.com/368723/79125630-145c0d00-7d64-11ea-892a-cfc543a394bd.gif)

### Toggle multiple elements

```html

  

    Toggle Sidebar 1

  

  

    Toggle Sidebar 1 & 2

  

  

    
Here's "Sidebar 1".

  

  

    
Here's "Sidebar 2".

  


```

![2](https://user-images.githubusercontent.com/368723/79125652-1b831b00-7d64-11ea-9915-7d13eb105fd7.gif)

### Customize the CSS class

```html

  

    Toggle Sidebar 1

  

      

  

    
Here's "Sidebar 1".

  


```

### Options

Option | Type | Required | Default | Description

--- | --- | :---: | --- | ---

`data-hidden-class` | `String` | 🚫 | `is-hidden` | The CSS class to toggle on/off. It's up to you to apply styles to the to this class to hide/show the element.

### License

This project is licensed under the MIT License.