Versatile Content Toggle Library – toggle-all

Category: Javascript | February 13, 2020
Author: NaciAkce
Views Total: 200
Official Page: Go to website
Last Update: February 13, 2020
License: MIT

Preview:

Versatile Content Toggle Library – toggle-all

Description:

toggle-all is a vanilla JavaScript content toggle library designed for developers to quickly create accordion, tooltip, popover, dropdown, toggle menu, tabbed content components on the web app.

How to use it:

1. Install & download the toggle-all package.

# Yarn
$ yarn add toggle-all

# NPM
$ npm install toggle-all --save

2. Import the library into your project.

// ES 6
import Toggle from 'toggle-all'
<!-- Browser Tag -->
<script src="https://unpkg.com/[email protected]/dist/bundle.umd.js" defer></script>

2. Create a dropdown menu.

<div class="dropdown show">
  <a class="btn btn-primary dropdown__toggle" href="#" role="button"
     id="dropdownMenuLink-one" data-toggle="#dropdown" aria-haspopup="true"
     aria-expanded="false">
      Dropdown link
  </a>
  <div class="dropdown__container" id="dropdown"
       aria-labelledby="dropdownMenuLink-one">
      <a class="dropdown__item" href="#">Action</a>
      <a class="dropdown__item" href="#">Another action</a>
      <a class="dropdown__item" href="#">Something else here</a>
  </div>
</div>

3.  Create a tooltip attached to an element.

<div class="tool-tip__content">
  <button
    class="tool-tip__toggle"
    data-toggle="#tool-tip-dropdown-example" data-toggle-role="tooltip"
    aria-label="Tooltip" aria-describedby="tool-tip-dropdown-example">
    Click Me
  </button>
  <div class="tool-tip__dropdown" id="tool-tip-dropdown-example">
    Tooltip Content Here
  </div>
</div>

4. Create tabs.

<div class="tabs__content">
  <div class="tabs__list" id="myTab" role="tablist">
      <a class="tabs__link is--active" id="first-tab" data-toggle="#first" data-toggle-group="#myTab"
         data-toggle-role="tab" href="#first" role="tab" aria-controls="first"
         aria-selected="true">Home</a>
      <a class="tabs__link" id="second-tab" data-toggle="#second" data-toggle-group="#myTab"
         data-toggle-role="tab" href="#first" role="tab" aria-controls="first"
         aria-selected="false">Profile</a>
      <a class="tabs__link" id="third-tab" data-toggle="#third" data-toggle-group="#myTab"
         data-toggle-role="tab" href="#first" role="tab" aria-controls="first"
         aria-selected="false">Contact</a>
  </div>
  <div class="tabs__content">
      <div class="tabs__body is--active is--show" role="tabpanel" aria-labelledby="first-tab"
           id="first" data-toggle-animate="default">
          <h4 class="tabs__header">Tab heading 1</h4>
          <p class="tabs__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt
              libero ipsum, veniam
              magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius,
              laborum tempore cumque amet id perspiciatis nostrum unde?</p>
          <p class="tabs__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum,
              maiores.</p>
      </div>
      <div class="tabs__body" role="tabpanel" aria-labelledby="second-tab" id="second"
           data-toggle-animate="default">
          <h4 class="tabs__header">Tab heading 2</h4>
          <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Consectetur
              odio cum eveniet
              excepturi eum provident molestias ad ipsa unde dignissimos illo porro animi earum
              aliquam perspiciatis id omnis, adipisci incidunt. Qui, beatae. Beatae animi totam
              obcaecati at quae, iste facere fuga nemo pariatur esse nihil?</p>
          <p class="tabs__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloremque
              commodi eos
              voluptatem numquam pariatur deleniti repellat fugiat eligendi nulla molestiae sunt
              praesentium vero sequi distinctio error quibusdam maiores natus magnam, explicabo
              hic
              sed alias dolores, quis eum! Reprehenderit atque cupiditate dolorum? Saepe,
              doloribus
              veniam? Nulla!</p>
      </div>
      <div class="tabs__body" role="tabpanel" aria-labelledby="third-tab" id="third"
           data-toggle-animate="default">
          <h4 class="tabs__header">Tab heading 3</h4>
          <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Laboriosam
              officiis voluptas
              maiores deserunt ullam aliquam?</p>
          <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Accusamus,
              officia accusantium
              quod fuga porro eius animi earum excepturi omnis! Reprehenderit!</p>
      </div>
  </div>
</div>

5. Create an accordion component.

<div class="accordion__content" id="accordion">
  <div class="accordion__card">
      <div class="accordion__header" id="headingOne">
          <button class="accordion__button is--active" data-toggle="#first-accordion"
                  data-toggle-role="accordion" aria-controls="first"
                  aria-expanded="true">Accordion 1 <span
                    class="accordion__icon"></span></button>
      </div>
      <div class="accordion__dropdown is--active" aria-labelledby="headingOne"
           id="first-accordion">
          <div class="accordion__body">
              <h4 class="accordion__header">heading 1</h4>
              <p class="accordion__text">Lorem ipsum, dolor sit amet consectetur
                  adipisicing
                  elit.
                  Incidunt
                  libero ipsum, veniam
                  magni modi exercitationem debitis ducimus assumenda ratione corporis,
                  illum
                  eius,
                  laborum tempore cumque amet id perspiciatis nostrum unde?</p>
              <p class="accordion__text">Lorem ipsum dolor sit, amet consectetur
                  adipisicing
                  elit.
                  Ipsum,
                  maiores.</p>
          </div>
      </div>
  </div>
  <div class="accordion__card">
      <div class="accordion__header" id="headingTwo">
          <button class="accordion__button" data-toggle="#second-accordion"
                  data-toggle-role="accordion" aria-controls="second"
                  aria-expanded="false">Accordion 1<span
                    class="accordion__icon"></span></button>
      </div>
      <div class="accordion__dropdown" aria-labelledby="headingTwo" id="second-accordion">
          <div class="accordion__body">
              <h4 class="tabs__header">heading 1</h4>
              <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing
                  elit.
                  Laboriosam
                  officiis voluptas
                  maiores deserunt ullam aliquam?</p>
              <p class="tabs__text">Lorem ipsum dolor sit amet consectetur adipisicing
                  elit.
                  Accusamus,
                  officia accusantium
                  quod fuga porro eius animi earum excepturi omnis! Reprehenderit!</p>
          </div>
      </div>
  </div>
  <div class="accordion__card">
      <div class="accordion__header" id="headingThree">
          <button class="accordion__button" data-toggle="#third-accordion"
                  data-toggle-group="#accordion" data-toggle-role="accordion"
                  aria-controls="third" aria-expanded="false">Accordion 1 <span
                    class="accordion__icon"></span></button>
      </div>
      <div class="accordion__dropdown" aria-labelledby="headingThree"
           id="third-accordion">
          <div class="accordion__body">
              <h4 class="accordion__header">heading 2</h4>
              <p class="accordion__text">Lorem ipsum dolor sit amet consectetur
                  adipisicing
                  elit.
                  Consectetur
                  odio cum eveniet
                  excepturi eum provident molestias ad ipsa unde dignissimos illo porro
                  animi
                  earum
                  aliquam perspiciatis id omnis, adipisci incidunt. Qui, beatae. Beatae
                  animi
                  totam
                  obcaecati at quae, iste facere fuga nemo pariatur esse nihil?</p>
              <p class="accordion__text">Lorem ipsum, dolor sit amet consectetur
                  adipisicing
                  elit.
                  Doloremque
                  commodi eos
                  voluptatem numquam pariatur deleniti repellat fugiat eligendi nulla
                  molestiae sunt
                  praesentium vero sequi distinctio error quibusdam maiores natus magnam,
                  explicabo
                  hic
                  sed alias dolores, quis eum! Reprehenderit atque cupiditate dolorum?
                  Saepe,
                  doloribus
                  veniam? Nulla!</p>
          </div>
      </div>
  </div>
</div>

6. Create an overlay component.

<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>

7. Make the content to be toggled on hover.

const init = window.toggle({
    onHover: true
});

8. Disable the hover event on specific screens.

const init = window.toggle({
      onHover: true,
      onnHoverMediaQuery: '(max-width: 992px)'
});

9. Stop playing videos when hidden.

const init = window.toggle({
      stopVideo: true
});

10. Default selectors & CSS classes.

const init = window.toggle({
      selectorToggle: '[data-toggle]',
      selectorGlobal: '[data-toggle-global]', 
      selectorGroup: '[data-toggle-group]', 
      selectorValidate: '[data-toggle-validate]', 
      selectorRole: '[data-toggle-role]',
      selectorBack: '[data-toggle-back]', 
      selectorNext: '[data-toggle-next]', 
      selectorAnimate: '[data-toggle-animate]',
      selectorHover: '[data-toggle-hover]', 
      toggleActiveClass: 'is--active',
      toggleErrorClass: 'is--error',
      toggleCollapseClass: 'is--collapsing',
      toggleShowClass: 'is--show'
});

11. Callback functions.

const init = window.toggle({
      callbackOpen: false,
      callbackClose: false,
      callbackToggle: false
});

Changelog:

v1.2.0 (02/13/2020)

  • add new role ‘overlay’
  • disable on media query attribute

10/25/2019

  • v1.1.2

You Might Be Interested In:


Leave a Reply