Notably Polite Mariner

    slidetoggle
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.2 • Public • Published

    GitHub license npm npm bundle size

    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 requestAnimationFrame function.

    Link to working demo - Demo

    API

     toggle(
      selector: string | HTMLElement,
      options: {
        // animation time
        // OPTIONAL
        // default value - 200
        miliseconds: number,
        // animation transition function
        // OPTIONAL
        // default value - linear
        transitionFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'cubic-bezier(...your custom arguments)',
        // callback to notify that animation has started
        // OPTIONAL
        onAnimationStart: () => void,
        // callback to notify that animation has ended
        // OPTIONAL
        onAnimationEnd: () => void,
        // callback to notify that element has 100% height
        // works only with toggle()
        // OPTIONAL
        onOpen: () => void, 
        // callback to notify that element has 0% height
        // works only with toggle()
        // OPTIONAL
        onClose: () => void,
        // when we are done showing the element
        // we set this value as the display property
        // works only with toggle(), show()
        // OPTIONAL
        // default value - block
        elementDisplayStyle: string 
      },
     )

    USAGE

    Install package by npm

    npm install --save-dev slidetoggle
    

    Install package by yarn

    yarn add slidetoggle
    

    Bundler

    import { hide, show, toggle } from 'slidetoggle';
    
    const btn = document.querySelector('button.btn');
    btn.addEventListener('click', () => {
      toggle('div.toggle-div', {
        miliseconds: 300,
        transitionFunction: 'ease-in',
        onAnimationStart: () => {
          console.log('animation started');
        },
        onAnimationEnd: () => {
          console.log('animation ended');
        },
        onOpen: () => { // This function is only possible with toggle
          console.log('Only with toggle - when element has 100%');
        },
        onClose: () => { // This function is only possible with toggle
          console.log('Only with toggle - when element has 0%');
        },
        elementDisplayStyle: 'inline-block' 
      });
    });

    UMD

    <html>
      <script src="<your_directory>/slidetoggle/slidetoggle.js"></script>
      <script>
        document.querySelector('button.btn').addEventListener('click', () => {
          const element = document.querySelector('div.section');
          slidetoggle.show(element, {
            miliseconds: 300,
            onAnimationStart: () => {
              console.log('animation started');
            },
            onAnimationEnd: () => {
              console.log('animation ended');
            },
            elementDisplayStyle: 'flex'
          });
        });
      </script>
    </html>

    LICENSE

    MIT License

    Install

    npm i slidetoggle

    DownloadsWeekly Downloads

    547

    Version

    3.3.2

    License

    MIT

    Unpacked Size

    52.2 kB

    Total Files

    52

    Last publish

    Collaborators

    • zgrybus