Class toggle #OOTB

Use this utility data attribute if you wish to dynamically add a class to a component. Useful for interactions like show & hide.

Class toggle

  • This DIV will have a class display-none
    Example with data-js-active-only
    Tab 1 
  • 
<div id="targetDiv">
  This DIV will have a class display-none
</div>
<button class="button" data-js-class-toggle="display-none" data-js-class-toggle-target="#targetDiv">
  Toggle Button
</button>

<!-- Example with data-js-active-only -->
<style>
  .dropdown-content > .dropdown-anchor {
    display: none;
  }
  .dropdown-anchor._is-selected,
  .dropdown-anchor._is-active {
    display: block;
  }
  .dropdown-anchor {
    animation: fadeIn 600ms both;
  }
</style>

<div class="tab-nav-holder" role="tablist">
  <button aria-controls="tab1" role="tab" class="tab1 tab-nav _is-active" data-js-class-toggle="_is-active" data-js-active-only="true" data-js-class-toggle-target=".tab1, .dropdown-anchor._is-active, .tab-nav._is-active">
    Tab 1
  </button>
  <button aria-controls="tab2" role="tab" class="tab2 tab-nav" data-js-class-toggle="_is-active" data-js-active-only="true" data-js-class-toggle-target=".tab2, .dropdown-anchor._is-active, .tab-nav._is-active">
    Tab 2
  </button>
</div>

<section class="dropdown-content">
  <article tabindex="0" role="tabpanel" id="tab1" class="dropdown-anchor tab1 _is-active">
    <h5 class="text-center">
      Tab 1
    </h5>
  </article>
  <article tabindex="0" role="tabpanel" id="tab2" class="dropdown-anchor tab2">
    <h5 class="text-center">
      Tab 2
    </h5>
  </article>
</section>
  • Attribute name Type Description
    data-js-class-toggle Required The name of the class you wish to toggle. For example, display-none, display-block etc.
    data-js-class-toggle-target Required The HTML element which will receive the toggled class name
    data-js-active-only Optional Add this attribute if you do not wish to toggle the class name once it is applied
  • Attribute name Type Description
    aria-controls="tab-content-id" Required The value should be the HTML ID of the element you want to toggle
    role="tablist", role="tab", role="tabpanel" Required Add the following attributes if you are using class toggle as a tab component
    tabindex="0" Optional Add if you want the tab content to be focussable by the screan reader