[](https://github.com/zgrybus/slideToggle/blob/master/LICENSE) [](https://www.npmjs.com/package/slidetoggle) [](https://bundlephobia.com/result?p=slidetoggle)
# **slideToggle()**
> Small library that replaces the so-loved jQuery function.
**You do not have to** worry about styles like: _padding, border, height and even display: none_;
The library **calculates everything**. The library uses the [Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
**Link to working demo - [Demo](https://zgrybus.github.io/slideToggle/)**
**If you have trouble with the API, check the `example/scripts/index.ts` file.**
# **API**
```javascript
toggle(
selector: HTMLElement,
options: {
/*
animation time in miliseconds
*/
miliseconds?: number = 200,
/*
animation transition function
*/
transitionFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'cubic-bezier(...your custom arguments)' = 'linear',
/*
callback to notify that animation has started
elementRef: element that we are animating
*/
onAnimationStart?: (elementRef: HTMLElement) => void,
/*
callback to notify that animation has ended
elementRef: element that we are animating
*/
onAnimationEnd?: (elementRef: HTMLElement) => void,
/*
callback to notify that element has 100% height ( only in toggle )
elementRef: element that we are animating
*/
onOpen?: (elementRef: HTMLElement) => void,
/*
callback to notify that element has 0% height ( only in toggle )
elementRef: element that we are animating
*/
onClose?: (elementRef: HTMLElement) => void,
/*
when we are done showing the element
we set this value as the display property
works only with toggle(), show()
*/
elementDisplayStyle?: string = 'block'
},
)
```
# **USAGE**
Install package by npm
```npm
npm install --save-dev slidetoggle
```
Install package by yarn
```yarn
yarn add slidetoggle
```
### Bundler
```javascript
import { hide, show, toggle } from 'slidetoggle';
const btn = document.querySelector('button.btn');
btn.addEventListener('click', () => {
toggle('div.toggle-div', {
miliseconds: 400,
onAnimationStart: elementRef() => {
console.log('toggle: START ( onAnimationStart )', elementRef);
},
onAnimationEnd: (elementRef) => {
console.log('toggle: END ( onAnimationEnd )', elementRef);
},
onOpen: (elementRef) => {
console.log('element: VISIBLE ( onOpen )', elementRef);
},
onClose: (elementRef) => {
console.log('element: HIDDEN ( onClose )', elementRef);
},
elementDisplayStyle: 'flex',
transitionFunction: 'ease-in',
});
});
```
### UMD
```html
```
# **LICENSE**
[MIT](https://en.wikipedia.org/wiki/MIT_License) License