{"id":13765081,"url":"https://github.com/damonbauer/stimulus-toggle-util","last_synced_at":"2025-03-20T11:29:27.102Z","repository":{"id":42885688,"uuid":"255325326","full_name":"damonbauer/stimulus-toggle-util","owner":"damonbauer","description":"An on/off toggle utility for Stimulus","archived":false,"fork":false,"pushed_at":"2023-03-04T12:01:57.000Z","size":1998,"stargazers_count":23,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T20:48:25.671Z","etag":null,"topics":["stimulus","stimulus-js","stimulusjs","toggle"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damonbauer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-04-13T12:50:08.000Z","updated_at":"2024-07-12T02:35:32.000Z","dependencies_parsed_at":"2024-01-07T18:23:01.028Z","dependency_job_id":null,"html_url":"https://github.com/damonbauer/stimulus-toggle-util","commit_stats":{"total_commits":11,"total_committers":2,"mean_commits":5.5,"dds":0.09090909090909094,"last_synced_commit":"930b29d8b4746bbbd363e76bf84ae9e96134a21e"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fstimulus-toggle-util","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fstimulus-toggle-util/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fstimulus-toggle-util/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fstimulus-toggle-util/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damonbauer","download_url":"https://codeload.github.com/damonbauer/stimulus-toggle-util/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244603453,"owners_count":20479832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["stimulus","stimulus-js","stimulusjs","toggle"],"created_at":"2024-08-03T16:00:33.706Z","updated_at":"2025-03-20T11:29:26.784Z","avatar_url":"https://github.com/damonbauer.png","language":"JavaScript","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)\n\n# stimulus-toggle-util\n\nAn on/off toggle utility for [Stimulus](https://stimulusjs.org/).\n\n[View a demo.](https://codesandbox.io/s/stimulus-toggle-demo-qelx8)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n- [License](#license)\n\n## Installation\n\n```sh\n$ yarn add stimulus-toggle-util\n```\n\n### Register the Controller\n\n```js\n// ./packs/application.js\nimport { Application } from 'stimulus';\n// import Toggle\nimport Toggle from 'stimulus-toggle-util';\n\nimport { definitionsFromContext } from 'stimulus/webpack-helpers';\nconst application = Application.start();\nconst context = require.context('../controllers', true, /\\.js$/);\napplication.load(definitionsFromContext(context));\n\n// Manually register `stimulus-toggle-util` as a stimulus controller\napplication.register('toggle', Toggle);\n```\n\n## Usage\n\n1. Attach the controller to an element. Recommended to attach to a top-level container, like `\u003cbody\u003e` or `\u003cmain\u003e` so it can be used anywhere.\n    * **Example:**\n    ```html\n    \u003cmain data-controller=\"toggle\"\u003e...\u003c/main\u003e\n    ```\n2. Attach an `action` and a `toggle target` to an element that should _perform_ the toggling.\n    * **Example:**\n    ```html\n    \u003cbutton data-action=\"toggle#toggle\" data-toggle-target=\"sidebar-1\"\u003eToggle\u003c/button\u003e\n    ```\n    * `data-action=\"toggle#toggle\"`: `toggle` is the `ToggleController`, `#toggle` is the _action_ that is performed when this element is clicked.\n3. Attach a `toggle name` to an element that should _be toggled_.\n    * **Example:**\n    ```html\n    \u003caside data-toggle-name=\"sidebar-1\"\u003e...\u003c/aside\u003e\n    ```\n\n### Toggle a single element\n\n```html\n\u003cmain data-controller=\"toggle\"\u003e\n  \u003cbutton data-action=\"toggle#toggle\" data-toggle-target=\"sidebar-1\"\u003e\n    Toggle Sidebar 1\n  \u003c/button\u003e\n      \n  \u003caside class=\"is-hidden\" data-toggle-name=\"sidebar-1\"\u003e\n    \u003cp\u003eHere's \"Sidebar 1\".\u003c/p\u003e\n  \u003c/aside\u003e\n\u003c/main\u003e\n```\n\n![1](https://user-images.githubusercontent.com/368723/79125630-145c0d00-7d64-11ea-892a-cfc543a394bd.gif)\n\n### Toggle multiple elements\n\n```html\n\u003cmain data-controller=\"toggle\"\u003e\n  \u003cbutton data-action=\"toggle#toggle\" data-toggle-target=\"sidebar-1\"\u003e\n    Toggle Sidebar 1\n  \u003c/button\u003e\n  \u003cbutton\n    data-action=\"toggle#toggle\"\n    data-toggle-target=\"sidebar-1,sidebar-2\"\n  \u003e\n    Toggle Sidebar 1 \u0026 2\n  \u003c/button\u003e\n\n  \u003caside class=\"is-hidden\" data-toggle-name=\"sidebar-1\"\u003e\n    \u003cp\u003eHere's \"Sidebar 1\".\u003c/p\u003e\n  \u003c/aside\u003e\n  \u003caside class=\"is-hidden\" data-toggle-name=\"sidebar-2\"\u003e\n    \u003cp\u003eHere's \"Sidebar 2\".\u003c/p\u003e\n  \u003c/aside\u003e\n\u003c/main\u003e\n```\n\n![2](https://user-images.githubusercontent.com/368723/79125652-1b831b00-7d64-11ea-9915-7d13eb105fd7.gif)\n\n### Customize the CSS class\n\n```html\n\u003cmain data-controller=\"toggle\" data-hidden-class=\"custom-hidden-class\"\u003e\n  \u003cbutton data-action=\"toggle#toggle\" data-toggle-target=\"sidebar-1\"\u003e\n    Toggle Sidebar 1\n  \u003c/button\u003e\n      \n  \u003caside data-toggle-name=\"sidebar-1\"\u003e\n    \u003cp\u003eHere's \"Sidebar 1\".\u003c/p\u003e\n  \u003c/aside\u003e\n\u003c/main\u003e\n```\n\n### Options\n\nOption | Type | Required | Default | Description\n--- | --- | :---: | --- | ---\n`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.\n\n### License\n\nThis project is licensed under the MIT License.\n","funding_links":[],"categories":["Packages","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamonbauer%2Fstimulus-toggle-util","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamonbauer%2Fstimulus-toggle-util","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamonbauer%2Fstimulus-toggle-util/lists"}