Have ideas to improve npm?Join in the discussion! »

    @justeat/f-toggle

    2.0.0 • Public • Published

    f-toggle 🐻

    npm version Build Status Coverage Status install size

    Fozzie vanilla JS toggle library.

    Visibility is set by applying the is-hidden class to the target element.

    Adding f-toggle to your project

    yarn add @justeat/f-toggle

    Then, inside your script import and run f-toggle.

    import toggle from '@justeat/f-toggle';
     
    toggle();

    Setting up toggles

    To create a toggle add a data-toggle-target attribute to the element which is going to trigger the toggle

    <a data-toggle-target="toggle-me">Trigger toggle</a>

    Then add a data-toggle-name attribute to the element which is going to be toggled

    <div data-toggle-name="toggle-me">I will be toggled</div>

    Showing elements

    You can use the show: prefix in order to show an element when clicked

    <a data-toggle-target="show:toggle-me">Trigger toggle</a>

    Hiding elements

    You can use the hide: prefix in order to hide an element when clicked

    <a data-toggle-target="hide:toggle-me">Trigger toggle</a>

    Multiple toggles

    You can specify multiple targets and states by separating them with a space

    <a data-toggle-target="alpha beta hide:gamma show:delta">Trigger toggle</a>
     
    <div data-toggle-name="alpha">alpha</div>
    <div data-toggle-name="beta">beta</div>
    <div data-toggle-name="gamma">gamma</div>
    <div data-toggle-name="delta">delta</div>

    This will toggle the visibility of alpha & beta, hide gamma, and show delta.

    Toggle a custom class

    You can specify a custom toggle class by adding the data-toggle-class attribute

    <a data-toggle-target="toggle-me" data-toggle-class="toggled">Trigger toggle</a>

    In this example the toggled class will be applied to the target element (rather than the default is-hidden class).

    Accordion

    If you require accordion behaviour just wrap your content within an element containing data-toggle-accordion. On clicking a button with data-toggle-target the target item will be toggled, and all other elements in the group are hidden. All accordion sections are hidden by default.

    In this instance you are then able to add data-toggle-class to the parent, as opposed to each data-toggle-target.

    <div data-toggle-accordion data-toggle-class="is-hidden">
        <button data-toggle-target="one"></button>
        <div data-toggle-name="one"></div>
        <button data-toggle-target="two"></button>
        <div data-toggle-name="two"></div>
        <button data-toggle-target="three"></button>
        <div data-toggle-name="three"></div>
    </div>

    To expand accordion section by default add data-toggle-section-expanded attribute value to the parent element.

    <div data-toggle-accordion data-toggle-section-expanded="two" data-toggle-class="is-hidden">
        <button data-toggle-target="one"></button>
        <div data-toggle-name="one"></div>
        <button data-toggle-target="two"></button>
        <div data-toggle-name="two"></div>
        <button data-toggle-target="three"></button>
        <div data-toggle-name="three"></div>
    </div>

    Exclude toggle items from accordion

    In the situation you have a toggle item within an accordion element, but you do not want it to adopt the accordion behaviour, simply add data-toggle-accordion-exclude:

    <div data-toggle-accordion>
        <div data-toggle-name="one"></div>
        <button data-toggle-target="one"></button>
        <div data-toggle-name="two">
            <div data-toggle-name="nested" data-toggle-accordion-exclude></div>
            <button data-toggle-target="nested" data-toggle-accordion-exclude></button>
        </div>
        <button data-toggle-target="two"></button>
    </div>

    Methods

    setToggleCallback

    Allows user to run callback when a section is toggled.

    Arguments

    Selector Specify the section or accordion to set a callback on when a click event is fired on it

    • Type: string | Element
    • Example: .selector

    Callback The callback to be executed on clicking the section

    • Type: function
    • Example: () => { callbackFn(); }
    // This would call the callback if any section within the accordion is toggled
    setToggleCallback('[data-toggle-accordion]', () => {
      callbackFn();
    });
     
    // This would call the callback if the section is toggled
    setToggleCallback('[data-toggle-target]', () => {
      callbackFn();
    });

    toggleAccordion

    Toggles the accordion sections, displaying the section specified and closing all others

    Arguments

    Selector Specify the accordion to toggle

    • Type: string
    • Example: .accordion

    Section Specify the name of the section to be shown. This will be the value of the data-toggle-name attribute

    • Type: string
    • Example: two
    toggleAccordion('.accordion', 'two');

    toggleSection

    Toggles sections based on the options passed in

    Arguments

    Options Specify the sections to toggle/show/hide

    • Type: string
    • Example: hide:one hide:two

    Class Specify the toggle class to be added/removed from sections

    • Type: string
    • Example: is-hidden-custom
    toggleSection('hide:one hide:two', 'is-hidden-custom');

    Running the unit tests

    This module is covered by a suite of unit tests. To run them simply run yarn test on the command line.

    Keywords

    Install

    npm i @justeat/f-toggle

    DownloadsWeekly Downloads

    41

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    24 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar