toggle-all

v1.2.0

Javascript plugin toggle dropdown, accordion, tabs

0/weekUpdated 3 years agoMITUnpacked: 1.6 MB

npm install toggle-all

Toggle

![Build Status](https://travis-ci.org/NaciAkce/toggle-all)
![Coverage Status](https://coveralls.io/github/NaciAkce/toggle-all?branch=master)

Toggle can handle Dropdowns, Accordions, Menu, Tabs, Tooltips. Can be grouped and supports also on hover also

Demo

Options

``js { selectorToggle: '[data-toggle]', // Toggle Selector selectorGlobal: '[data-toggle-global]', // Close Toggle if click outside selectorGroup: '[data-toggle-group]', // Group toggles selectorValidate: '[data-toggle-validate]', // Form Validation - Prevent Closing if invalid selectorRole: '[data-toggle-role]', // tab, accordion, tooltip, overlay, default selectorBack: '[data-toggle-back]', // Close Toggle. You select a parentSelector. see examples selectorNext: '[data-toggle-next]', // Selects next Sibling. Add to Parent. Use Case: for Nested Multiple driopdowns with same classes instead of unique IDs selectorAnimate: '[data-toggle-animate]', // Animate. Values: default(all other css transitions), height(accordion) selectorHover: '[data-toggle-hover]', // Add to direct Parent toggleActiveClass: 'is--active', toggleErrorClass: 'is--error', toggleCollapseClass: 'is--collapsing', // Class while animating height toggleShowClass: 'is--show', // Class while default animation onHover: false, onnHoverMediaQuery: '(max-width: 992px)', // Disable hover e.g smaller then 992px stopVideo: true, callbackOpen: false, callbackClose: false, callbackToggle: false }

`Installation`

#### npm

`npm i toggle-all`

#### yarn

`yarn add toggle-all`

#### unpkg

#### js

`import Toggle from 'toggle-all'`

`Usage`

`$3`

`html


            id="dropdownMenuLink-two" data-toggle="#dropdown1" aria-haspopup="true" aria-expanded="false">
        Dropdown link
    
                aria-labelledby="dropdownMenuLink-two">
        ...

`$3`

'data-toggle-global'

`html


            id="dropdownMenuLink-two" data-toggle="#dropdown1" data-toggle-global
        aria-haspopup="true" aria-expanded="false">
        Dropdown link
    
                aria-labelledby="dropdownMenuLink-two">
        ...

`$3`

'data-toggle-group'

`html


            id="dropdownMenuLink-two" data-toggle="#dropdown1" data-toggle-global
        data-toggle-group="group-1" aria-haspopup="true" aria-expanded="false">
        Dropdown link 1
    
                aria-labelledby="dropdownMenuLink-two">
        ...
    

             id="dropdownMenuLink-three" data-toggle="#dropdown2" data-toggle-global
        data-toggle-group="group-1" aria-haspopup="true" aria-expanded="false">
        Dropdown link 2
    
                aria-labelledby="dropdownMenuLink-three">
        ...

`$3`

'data-toggle-role' there are special behaviors : tab, accordion, tooltip, overlay

in this case 'overlay' adds a class to the body tag 'is--overlay' to prevent scrolling

'data-toggle-back' select the parentElement who inherits the toggle

`html


    Menu

    Toggle Navigation

`$3`

`js Toggle({ onHover: true });`

`html


Browser Support

`json "browserslist": [ "Chrome >= 72", "ChromeAndroid >= 72", "Firefox >= 65", "iOS >=12", "IE >= 11" ],`

`HTML and CSS`

Touch if you use overlays which covers the whole screen in combination with transitions (last example)

Click ios trigger click events on non tapable elements. You have to add the css property cursor:pointer. There is already a class for the body tag is--ios if you use data-toggle-global

`body { &.is--ios { cursor: pointer; } }

html { touch-action: manipulation; }

a, button { touch-action: manipulation; }

Options

js
 {
    selectorToggle: '[data-toggle]', // Toggle Selector
    selectorGlobal: '[data-toggle-global]', // Close Toggle if click outside
    selectorGroup: '[data-toggle-group]', // Group toggles
    selectorValidate: '[data-toggle-validate]', // Form Validation - Prevent Closing if invalid
    selectorRole: '[data-toggle-role]', // tab, accordion, tooltip, overlay, default
    selectorBack: '[data-toggle-back]', // Close Toggle. You select a parentSelector. see examples
    selectorNext: '[data-toggle-next]', // Selects next Sibling. Add to Parent. Use Case: for Nested Multiple driopdowns with same classes instead of unique IDs
    selectorAnimate: '[data-toggle-animate]', // Animate. Values: default(all other css transitions), height(accordion)
    selectorHover: '[data-toggle-hover]', // Add to direct Parent
    toggleActiveClass: 'is--active',
    toggleErrorClass: 'is--error',
    toggleCollapseClass: 'is--collapsing', // Class while animating height
    toggleShowClass: 'is--show', // Class while default animation
    onHover: false,
    onnHoverMediaQuery: '(max-width: 992px)', // Disable hover e.g  smaller then 992px
    stopVideo: true,
    callbackOpen: false,
    callbackClose: false,
    callbackToggle: false
}

HTML and CSS

Touch if you use overlays which covers the whole screen in combination with transitions (last example)

Click ios

 trigger click events on non tapable elements. You have to add the css property cursor:pointer. There is already a class for the body tag

is--ios if you use data-toggle-global


body {
    &.is--ios {
        cursor: pointer;
    }
}

html {
    touch-action: manipulation;
}

a, button {
    touch-action: manipulation;
}