npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

toggle-all

v1.2.0

Published

Javascript plugin toggle dropdown, accordion, tabs

Downloads

210

Readme

Toggle

Build Status Coverage Status

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

Demo

Options

 {
    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

<script src="https://unpkg.com/toggle-all@latest/dist/bundle.umd.js" defer></script>

js

import Toggle from 'toggle-all'

Usage

Simple


<div class="dropdown show">
    <a class="btn btn-primary dropdown__toggle" href="#" role="button"
        id="dropdownMenuLink-two" data-toggle="#dropdown1" aria-haspopup="true" aria-expanded="false">
        Dropdown link
    </a>
    <div class="dropdown__container" id="dropdown1"
            aria-labelledby="dropdownMenuLink-two">
        ...
    </div>
</div>

Global - close dropdown on click outside

'data-toggle-global'


<div class="dropdown show">
    <a class="btn btn-primary dropdown__toggle" href="#" role="button"
        id="dropdownMenuLink-two" data-toggle="#dropdown1" data-toggle-global
        aria-haspopup="true" aria-expanded="false">
        Dropdown link
    </a>
    <div class="dropdown__container" id="dropdown1"
            aria-labelledby="dropdownMenuLink-two">
        ...
    </div>
</div>

Grouped - close grouped element if is active

'data-toggle-group'


<div class="dropdown show">
    <a class="btn btn-primary dropdown__toggle" href="#" role="button"
        id="dropdownMenuLink-two" data-toggle="#dropdown1" data-toggle-global
        data-toggle-group="group-1" aria-haspopup="true" aria-expanded="false">
        Dropdown link 1
    </a>
    <div class="dropdown__container" id="dropdown1"
            aria-labelledby="dropdownMenuLink-two">
        ...
    </div>
     <a class="btn btn-primary dropdown__toggle" href="#" role="button"
        id="dropdownMenuLink-three" data-toggle="#dropdown2" data-toggle-global
        data-toggle-group="group-1" aria-haspopup="true" aria-expanded="false">
        Dropdown link 2
    </a>
    <div class="dropdown__container" id="dropdown2"
            aria-labelledby="dropdownMenuLink-three">
        ...
    </div>
</div>
</div>

Role and Back

'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


 <div class="nav__content">
    <p>Menu</p>
    <span class="sr-only" id="toggle-btn-three">Toggle Navigation</span>
    <button class="dropdown__button nav-menu__button" data-toggle-group="group-1" data-toggle="#nav3"
            data-toggle-global data-toggle-role="overlay" aria-labelledby="toggle-btn-three"><span
                class="dropdown__open"></span><span class="dropdown__close"></span></button>
    <div  id="nav3" class="nav-menu--transition" data-toggle-animate>
        <!-- Close button for mobile version -->
        <button class="dropdown__button nav-menu__button" data-toggle-back=".nav__content"><span class="dropdown__close"></span></button>
        <div class="nav-menu__scroll">
            <nav class="nav nav-menu"  data-toggle-next>

                <ul class="nav__list nav-menu--horizontal nav__list-0">

                </ul>
            </nav>
        </div>
    </div>
</div>

Example - Enable Hover Support

Toggle({
    onHover: true
});
    <div class="nav__wrap" data-toggle-next>
         <ul class="nav__list nav__list-0">
            <li class="nav-two__item" data-toggle-hover>
                <a class="nav-two__link" data-toggle=".nav-two__dropdown" data-toggle-group="#nav-two-list-0" href="#">...</a>
                <ul class="nav-two__list  nav-two__dropdown">
                    ...
                </ul>
            </li>
            ...
        </ul>
    </div>

Browser Support

"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;
}