https://github.com/kunukn/native-slide-toggle
Vanilla JS mobile friendly version of jQuery.slideToggle
https://github.com/kunukn/native-slide-toggle
Last synced: 6 months ago
JSON representation
Vanilla JS mobile friendly version of jQuery.slideToggle
- Host: GitHub
- URL: https://github.com/kunukn/native-slide-toggle
- Owner: kunukn
- License: mit
- Created: 2016-09-12T20:09:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-16T11:16:13.000Z (over 8 years ago)
- Last Synced: 2024-04-24T08:27:16.312Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 21
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# native slide toggle
Vanilla JS mobile friendly version of jQuery.slideToggle
# about
slide toggle to open or close content using CSS transition and transitionend event.
# demo
[](http://codepen.io/kunukn/full/yaYvrp/)
* native slide toggle vs jQuery.slideToggle http://codepen.io/kunukn/full/yaYvrp/
# browser support
| 
| 
| 
|
|
| 
|
|:---:|:---:|:---:|:---:|:---:|:---:|
| 50+ ✅ | 40+ ✅ | 9+ ✅ | 40+ ✅ | 12+ ✅ | 11+ ✅ |
# features
* Small library - JS is ~3kb minified and CSS is ~900 bytes minified
* CSS max-height transition on dynamically calculated height value
* Simple html structure with minimum CSS class usage
* Max-height is dynamically set and reset after the animation
* Tabbing is supported
* Vanilla JS, no other dependency
# npm
https://www.npmjs.com/package/native-slide-toggle
# usage
Check the **index.html** for inspiration.
* Add reference to `nst.min.js` and `nst.min.css` in the html page
* Apply the markup structure
* Apply custom css to override the library css
# html structure
Basic example
```html
toggle
Your content here
```
nst-component must be a parent element to the nst-content element and the nst-toggle element.
The extra div inside the nst-content is for padding and to make the open/close animation look similar to jQuery.slideToggle.
# configuration
If you want to start with collapsed state add `nst-is-collapsed` class to the component. e.g.
```html
toggle
Your content here
```
If you want to manually init the component then add the `nst-manual-init` class to the component. e.g.
```html
toggle
Your content here
```
```javascript
var myComponentElement = document.getElementById('i-want-to-manually-init-this');
nst.init(myComponentElement);
```
# how does it work?
This uses CSS transition on max-height value. The max-height is dynamically set and removed with JS during expanding and collapsing. The height value is calculated dynamically based on the content. You can rotate the device or resize the browser window where the height is dynamically adjusted.
# development
* Git clone the project or download it
* npm install
* npm run start
For minification
* npm run deploy
# supported browsers
Browsers which supports requestAnimationFrame, transitionend event, css max-height transition, document.querySelector and Ecmascript 5.
# performance
The max-height triggers layout, paint and composite but is faster than JS animation.
https://csstriggers.com/max-height
# license
MIT