Toggles

A versatile toggle tool to show/hide the target element from any trigger element

Installation

Download my-toggle.js

jQuery must always be included before other files. Toggles requires the following files to work properly:

    <script src="path/to/jquery.js"></script>
    <script src="path/to/my-toggles.js"></script>

Overview

Toggles rely on triggers and toggles elements.

Trigger
Element that fires the show/hide

Toggle
Element to show/hide

By default, each time a toggle is opened, a click outside this toggle closes it. Please not that:

  • Not that trigger and toggle can be anywhere, trigger can even be placed into toggle.
  • A toggle can have several triggers.
  • A single trigger can trig several toggles
  • By default, all opened toggles are closed when a click is done outside of any of these toggles.

Here are multiple usage examples of toggles.

    <p my-toggle="foo">Click this trigger paragraph to show/hide the toggle</p>
    <div my-toggle-name="foo">This is the toggle element</div>
    <hr class="u-mt-md u-mb-md u-faded">
    <button class="my-btn mod-xs" my-toggle="foo2">toggle</button>
    <div my-toggle-name="foo2">This is the toggle element. Its trigger gets "active" class element</div>
    <hr class="u-mt-md u-mb-md u-faded">
    <div my-toggle-name="foo3" class="active">
        Dismiss example, auto disappear.
        <a href="#" class="my-btn mod-xs" onclick="myToggle.close('foo3')">close forever</a>
    </div>

Toggle group

When wrapped into a single container with custom attribute my-toggle-group, triggers and toggles behave like tabs.

Toggle groups overrides default close behavior: In toggle groups, all opened toggles keep opened when a click is done outside of any of these toggles.

    <div my-toggle-group>
        <button class="my-btn mod-xs active" my-toggle="tab-1">Tab 1</button> 
        <button class="my-btn mod-xs" my-toggle="tab-2">Tab 2</button> 
        <button class="my-btn mod-xs" my-toggle="tab-3">Tab 3</button> 
        <div my-toggle-name="tab-1" class="active">Tab 1 normally opened</div>
        <div my-toggle-name="tab-2">Tab 2</div>
        <div my-toggle-name="tab-3">Tab 3</div>
    </div>
    <hr class="u-mt-md u-mb-md u-faded">
    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="tab-1">Tab 1</button> 
        <button class="my-btn mod-xs" my-toggle="tab-2">Tab 2</button> 
        <button class="my-btn mod-xs" my-toggle="tab-3">Tab 3</button> 
        <div my-toggle-name="tab-1">Tab 1 normally closed</div>
        <div my-toggle-name="tab-2">Tab 2</div>
        <div my-toggle-name="tab-3">Tab 3</div>
    </div>

Tweaking the toggle group feature with multiple toggles with same id, toggle groups can behave like tags:

    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="tag-1">Tag 1</button> 
        <button class="my-btn mod-xs" my-toggle="tag-2">Tag 2</button> 
        <button class="my-btn mod-xs" my-toggle="tag-3">Tag 3</button> 
        <div my-toggle-name="tag-1">Content 1</div>
        <div my-toggle-name="tag-1">Content 2</div>
        <div my-toggle-name="tag-1">Content 3</div>
        <div my-toggle-name="tag-2">Content 4</div>
        <div my-toggle-name="tag-2">Content 5</div>
        <div my-toggle-name="tag-2">Content 6</div>
        <div my-toggle-name="tag-3">Content 7</div>
    </div>

If a trigger attribute is set to my-toggle="my-toggle-group", then clicking on it shows all the toggles contained into its toggle group container my-toggle-group.

    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="my-toggle-group">All</button> 
        <button class="my-btn mod-xs" my-toggle="tag-11">Tag 1</button> 
        <button class="my-btn mod-xs" my-toggle="tag-12">Tag 2</button> 
        <button class="my-btn mod-xs" my-toggle="tag-13">Tag 3</button> 
        <div my-toggle-name="tag-11">Content 1 with tag 1</div>
        <div my-toggle-name="tag-11">Content 2 with tag 1</div>
        <div my-toggle-name="tag-11">Content 3 with tag 1</div>
        <div my-toggle-name="tag-12">Content 4 with tag 2</div>
        <div my-toggle-name="tag-12">Content 5 with tag 2</div>
        <div my-toggle-name="tag-13">Content 6 with tag 3</div>
    </div>

If all toggles are normally active, only the my-toggle="my-toggle-group" trigger is set as active.

    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="my-toggle-group">All</button> 
        <button class="my-btn mod-xs" my-toggle="tag-21">Tag 1</button> 
        <button class="my-btn mod-xs" my-toggle="tag-22">Tag 2</button> 
        <button class="my-btn mod-xs" my-toggle="tag-23">Tag 3</button> 
        <div my-toggle-name="tag-21" class="active">Content 1 with tag 1</div>
        <div my-toggle-name="tag-21" class="active">Content 2 with tag 1</div>
        <div my-toggle-name="tag-21" class="active">Content 3 with tag 1</div>
        <div my-toggle-name="tag-22" class="active">Content 4 with tag 2</div>
        <div my-toggle-name="tag-22" class="active">Content 5 with tag 2</div>
        <div my-toggle-name="tag-23" class="active">Content 6 with tag 3</div>
    </div>

Options

By default, the click is the event used to show hide toggles. Add options by adding specific strings into the custom attribute my-toggle-options on the trigger. Each trigger can have its own toggle options

Force dismiss

By default, toggles close when user click outside it. This option disable this feature. Add force_dismiss into my-toggle-options attribute.

    <button class="my-btn mod-xs" my-toggle="classic">normal</button> 
    <button class="my-btn mod-xs" my-toggle="classic-w-force-dismiss" my-toggle-options="force_dismiss">with force dismiss</button> 
    <p my-toggle-name="classic" class="u-bc-neutral-light-4">Normal toggle: This toggle closes when user clicks outside this zone.</p>
    <p my-toggle-name="classic-w-force-dismiss" class="u-bc-neutral-light-4">This toggle does not close when you click outside this zone. Click the trigger once again to close.</p>

Hover

Specified toggle is shown on mouse hover / touch start (touch devices), hidden on mouse leave / touch end (touch devices). Add hover into my-toggle-options attribute.

    <button class="my-btn mod-xs" my-toggle="hover-1" my-toggle-options="hover">Hover me</button> 
    <div my-toggle-name="hover-1">Content shown by hover (touch on touch devices)</div>
    <hr class="u-mt-md u-mb-md u-faded">
    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="tag-21" my-toggle-options="hover">Tag 1</button> 
        <button class="my-btn mod-xs" my-toggle="tag-22">Tag 2</button> 
        <button class="my-btn mod-xs" my-toggle="tag-23">Tag 3</button> 
        <div my-toggle-name="tag-21">Content 1 with tag 1 is shown by hover (touch on touch devices)</div>
        <div my-toggle-name="tag-21">Content 2 with tag 1 is shown by hover (touch on touch devices)</div>
        <div my-toggle-name="tag-21">Content 3 with tag 1 is shown by hover (touch on touch devices)</div>
        <div my-toggle-name="tag-22">Content 4 with tag 2 (default behaviour: click)</div>
        <div my-toggle-name="tag-22">Content 5 with tag 2 (default behaviour: click)</div>
        <div my-toggle-name="tag-23">Content 6 with tag 3 (default behaviour: click)</div>
    </div>

Mouse enter

Specified toggle is shown on mouse hover / touch start (touch devices), but hidden only on click / touch start. Add mouseenter into my-toggle-options attribute.

    <button class="my-btn mod-xs" my-toggle="hover-1" my-toggle-options="mouseenter">Hover to open, click to close</button> 
    <div my-toggle-name="hover-1">Content shown by mouseenter (touch on touch devices)</div>
    <hr class="u-mt-md u-mb-md u-faded">
    <div my-toggle-group>
        <button class="my-btn mod-xs" my-toggle="tag-21" my-toggle-options="mouseenter">Tag 1</button> 
        <button class="my-btn mod-xs" my-toggle="tag-22">Tag 2</button> 
        <button class="my-btn mod-xs" my-toggle="tag-23">Tag 3</button> 
        <div my-toggle-name="tag-21">Content 1 with tag 1 is shown by mouseenter (touch on touch devices)</div>
        <div my-toggle-name="tag-21">Content 2 with tag 1 is shown by mouseenter (touch on touch devices)</div>
        <div my-toggle-name="tag-21">Content 3 with tag 1 is shown by mouseenter (touch on touch devices)</div>
        <div my-toggle-name="tag-22">Content 4 with tag 2 (default behaviour: click)</div>
        <div my-toggle-name="tag-22">Content 5 with tag 2 (default behaviour: click)</div>
        <div my-toggle-name="tag-23">Content 6 with tag 3 (default behaviour: click)</div>
    </div>

Icon rotate

Elements into the trigger with class containing icon- rotate 180 degrees on state change. Add icon-rotate into my-toggle-options attribute.

    <button class="my-btn" my-toggle="hover-1" my-toggle-options="icon-rotate">
        Toggle
        <span class="icon-chevron-down u-ml-xs"></span>
    </button> 
    <div my-toggle-name="hover-1">Content</div>

CSS Classes

.mod-on and .mod-off classes allows to display elements according to toggle state on triggers.

    <button class="my-btn" my-toggle="hover-1">
        <span class="mod-on">hide <span class="icon-chevron-up u-ml-xs"></span></span>
        <span class="mod-off">show <span class="icon-chevron-down u-ml-xs"></span></span>
    </button> 
    <div my-toggle-name="hover-1">Content</div>

Methods

    myToggle.update();
    // Start toggle events or refresh if DOM changed.

    myToggle.open(id);
    // where `id` is a string. Opens the specified toggle name.

    myToggle.close(id);
    // where `id` is a string. Opens the specified toggle name.

Usage examples

    <button class="my-btn" my-toggle="modal-1">open modal</button> 
    <p class="active u-fixed u-bottom-0 u-left-0 u-w-100 u-p-sm u-bc-neutral-dark-1 u-c-neutral-light-max" my-toggle-name="cookie">Cookie agreement pop <button class="my-btn mod-xs" onclick="myToggle.close('cookie')">i agree</button></p>
    <aside my-toggle-name="modal-1" class="u-fixed u-top-0 u-left-0 u-w-100 u-h-100 u-bc-translucid-dark-1" onclick="myToggle.close('modal-1')"></aside>
    <aside my-toggle-name="modal-1" class="my-position mod-absolute mod-middle-center mod-anchor-middle-center u-p-md u-bc-neutral-light-max u-brad-md u-bs-1">
        <h1 class="u-mt-none u-mb-sm">Hello Modal!</h1>
        <p>Clicking the black translucid overlay closes the modal, here is <a href="#" onclick="myToggle.close('modal-1')">another way to close this modal</a></p>
        <button class="my-btn" my-toggle="modal-1">standard close</button>
    </aside>

    <!-- Déclencheur ouverture fermeture -->
    <button class="my-btn" my-toggle="id-modal">modal</button>
    <!-- Modale -->
    <aside my-toggle-name="id-modal" class="my-position mod-fixed mod-top-left u-w-100 u-h-100">
        <div class="my-grid mod-center mod-middle my-position mod-fixed mod-top-left u-w-100 u-h-100">
            <div class="my-position mod-fixed mod-top-left u-w-100 u-h-100 u-cur-pointer u-bc-translucid-dark-min" my-toggle="id-modal"></div>
            <div class="u-p-xl u-bc-neutral-light-max u-brad-md u-relative u-ta-center" u-pl-md="sm" u-pr-md="sm">
                <nav class="my-position mod-absolute mod-top-sm mod-right-sm" mod-top-0="sm" mod-right-0="sm">
                    <button class="my-btn mod-transparent-dark mod-sticker u-fs-lg u-c-neutral-dark-1" my-toggle="id-modal"><span class="icon-close"></span></button>
                </nav>
                Content
            </div>
        </div>
    </aside>

Notification

    <!-- Déclencheur ouverture fermeture -->
    <button class="my-btn" my-toggle="id-notification">notification</button>
    <!-- Déclencheur ouverture fermeture -->
    <button class="my-btn" my-toggle="id-notification-success">success</button>
    <!-- Déclencheur ouverture fermeture -->
    <button class="my-btn" my-toggle="id-notification-warning">warning</button>
    <!-- Déclencheur ouverture fermeture -->
    <button class="my-btn" my-toggle="id-notification-danger">danger</button>

    <!-- Modale notification -->
    <aside my-toggle-name="id-notification" class="my-position mod-fixed mod-top-xl mod-right-md u-mw-600px">
        <div class="my-grid mod-nowrap mod-middle u-bc-plain-1 u-brad-sm u-bs-1 u-p-xxs u-relative">
            <div class="u-c-neutral-light-max u-fs-lg u-pr-sm u-pl-xs"><span class="icon-info"></span></div>
            <div class="mod-grow u-bc-neutral-light-max u-brad-sm u-p-sm">
                <nav class="my-grid mod-nowrap mod-space-between mod-middle">
                    <h5 class="u-fs-sm2">Titre notification</h5>
                    <button class="my-btn mod-transparent-dark u-fs-lg u-c-neutral-dark-1" my-toggle="id-notification">
                        <span class="icon-close"></span>
                    </button>
                </nav>
                <p>Et stet ea accusam diam sanctus gubergren, sea aliquyam amet dolore magna tempor gubergren kasd eos. Magna takimata diam et.</p>
                <nav><a href="#">Lien</a></nav>
            </div>
        </div>
    </aside>

    <!-- Modale notification -success -->
    <aside my-toggle-name="id-notification-success" class="my-position mod-fixed mod-top-xl mod-right-md u-mw-600px">
        <div class="my-grid mod-nowrap mod-middle u-bc-support-success u-brad-sm u-bs-1 u-p-xxs u-relative">
            <div class="u-c-neutral-light-max u-fs-lg u-pr-sm u-pl-xs"><span class="icon-info"></span></div>
            <div class="mod-grow u-bc-neutral-light-max u-brad-sm u-p-sm">
                <nav class="my-grid mod-nowrap mod-space-between mod-middle">
                    <h5 class="u-fs-sm2 u-c-support-success">Titre notification</h5>
                    <button class="my-btn mod-transparent-dark u-fs-lg u-c-neutral-dark-1" my-toggle="id-notification-success">
                        <span class="icon-close"></span>
                    </button>
                </nav>
                <p>Et stet ea accusam diam sanctus gubergren, sea aliquyam amet dolore magna tempor gubergren kasd eos. Magna takimata diam et.</p>
                <nav><a href="#">Lien</a></nav>
            </div>
        </div>
    </aside>

    <!-- Modale notification -warning -->
    <aside my-toggle-name="id-notification-warning" class="my-position mod-fixed mod-top-xl mod-right-md u-mw-600px">
        <div class="my-grid mod-nowrap mod-middle u-bc-support-warning u-brad-sm u-bs-1 u-p-xxs u-relative">
            <div class="u-c-neutral-light-max u-fs-lg u-pr-sm u-pl-xs"><span class="icon-info"></span></div>
            <div class="mod-grow u-bc-neutral-light-max u-brad-sm u-p-sm">
                <nav class="my-grid mod-nowrap mod-space-between mod-middle">
                    <h5 class="u-fs-sm2 u-c-support-warning">Titre notification</h5>
                    <button class="my-btn mod-transparent-dark u-fs-lg u-c-neutral-dark-1" my-toggle="id-notification-warning">
                        <span class="icon-close"></span>
                    </button>
                </nav>
                <p>Et stet ea accusam diam sanctus gubergren, sea aliquyam amet dolore magna tempor gubergren kasd eos. Magna takimata diam et.</p>
                <nav><a href="#">Lien</a></nav>
            </div>
        </div>
    </aside>

    <!-- Modale notification -danger -->
    <aside my-toggle-name="id-notification-danger" class="my-position mod-fixed mod-top-xl mod-right-md u-mw-600px">
        <div class="my-grid mod-nowrap mod-middle u-bc-support-danger u-brad-sm u-bs-1 u-p-xxs u-relative">
            <div class="u-c-neutral-light-max u-fs-lg u-pr-sm u-pl-xs"><span class="icon-info"></span></div>
            <div class="mod-grow u-bc-neutral-light-max u-brad-sm u-p-sm">
                <nav class="my-grid mod-nowrap mod-space-between mod-middle">
                    <h5 class="u-fs-sm2 u-c-support-danger">Titre notification</h5>
                    <button class="my-btn mod-transparent-dark u-fs-lg u-c-neutral-dark-1" my-toggle="id-notification-danger">
                        <span class="icon-close"></span>
                    </button>
                </nav>
                <p>Et stet ea accusam diam sanctus gubergren, sea aliquyam amet dolore magna tempor gubergren kasd eos. Magna takimata diam et.</p>
                <nav><a href="#">Lien</a></nav>
            </div>
        </div>
    </aside>