https://github.com/ht-devx/slidetoggle
🛠️ ⸨ plugin ⸩  slideToggle in JavaScript by animating CSS grid-template-rows
https://github.com/ht-devx/slidetoggle
slide-toggle slidedown slidetoggle slideup toggleslide
Last synced: 4 months ago
JSON representation
🛠️ ⸨ plugin ⸩  slideToggle in JavaScript by animating CSS grid-template-rows
- Host: GitHub
- URL: https://github.com/ht-devx/slidetoggle
- Owner: ht-devx
- License: mit
- Created: 2024-06-14T02:00:20.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-23T21:01:06.000Z (almost 2 years ago)
- Last Synced: 2025-06-11T04:47:41.412Z (12 months ago)
- Topics: slide-toggle, slidedown, slidetoggle, slideup, toggleslide
- Language: HTML
- Homepage: https://ht-devx.github.io/slideToggle/
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### slideToggle
A plugin that replicates jQuery's `slideToggle()` function in pure JavaScript by utilizing CSS transitions with `grid-template-rows`.
**Preview / Demo:** [ht-devx.github.io/slideToggle](https://ht-devx.github.io/slideToggle)\
**Demo code:** [jsfiddle.net/ht_dev/fua53ngr](https://jsfiddle.net/ht_dev/fua53ngr)\
**Author:** HT ([@ ht-devx](https://github.com/ht-devx))\
**Release date:** 2024-06-13\
**Last updated:** 2024-06-13 8:28PM [GMT-7]
---
#### Table of Contents:
* [About](#slidetoggle)
* [How to Use](#how-to-use)
* [Usage Notes](#usage-notes)
* [Attribution](#attribution)
* [Troubleshooting](#troubleshooting)
* [Credits](#credits)
---
#### How to use:
Include the following after ``:
```html
slideToggle({
trigger: "#your_button", // change this to your trigger's selector
content: "#your_content" // change this to your content's selector
})
:root {
--SlideToggle-Speed-1: 500ms;
--SlideToggle-Speed-2: 1s;
}
/* in the next line, change .content to your content's selector */
.content:not(.slidetoggle-content){
display:none;
}
```
What's happening in this example:
- Clicking an element called `#your_button` will cause an element called `#your_content` to slide toggle.
- On the 1st slide animation (revealing the content), it expands at the speed of `--SlideToggle-Speed-1`, which is set to `500ms`.
- On the 2nd slide animation (hiding the content), it retracts at the speed of `--SlideToggle-Speed-2`, which is set to `1s`.
- [optional] `.content:not(.slidetoggle-content)` with the CSS `display:none` hides content until the user interacts with it.
---
#### Usage notes:
If you have multiple contents you want to slide toggle, and want to auto-generate your **trigger** and **content** pairings based on naming patterns (e.g. numbered elements), with this HTML markup as an example (here, the numbered pattern is assigned in the `data-id` attribute):
```html
one's button
one's content
two's button
two's content
```
You can call the plugin like this:
```javascript
let triggerName = "button"; // change this to your trigger selector
let attrName = "data-id"; // change this to your numbered attribute
let contentName = ".content"; // change this to your content selector
// if you modify the 3 lines above, you don't need to touch anything here
document.querySelectorAll(triggerName)?.forEach(btn => {
let getID = btn.getAttribute(attrName);
slideToggle({
trigger: btn,
content: [...document.querySelectorAll(contentName)].find(x => x.getAttribute(attrName) == getID)
})
})
```
---
#### Attribution:
No visible credit/attribution is required, but please do not remove the existing credits in the code. A link to this repository would be appreciated.
---
#### Troubleshooting:
If you need further assistance, please contact me at: [hello.ht.dev@gmail.com](mailto:hello.ht.dev@gmail.com)
---
#### Credits:
`height:auto` animation via `grid-template-rows` by [Nelson Menezes](https://nemzes.net/posts/animating-height-auto).