Getting Started

Layout

Components

Plugins

Design

Form

CSS Helper

JS Helper

Tools

Tabs

Null Tabs is a simple and clean component that enables you to toggle the content of a single container. It also features hash functionality, which ensures that when you click on a tab and refresh the page, you will be redirected to the same page. Additionally, there is no need to add an initial active class to the HTML, as Null Tabs adds this dynamically.

Description Examples Usage Null JS

Description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, maxime. Tempora ducimus architecto quia quos laudantium voluptatibus, fugiat laboriosam quaerat quidem, rerum eius ipsa totam ratione corporis repellendus dolores iste reiciendis exercitationem. Quis delectus explicabo sunt similique quidem aliquid impedit inventore! Facere optio pariatur odit veritatis quo sit accusamus, quas modi laboriosam alias nostrum quisquam corrupti numquam eveniet voluptas, dolores cumque ex voluptates repellendus eum magni explicabo, impedit facilis officia! Sapiente error corrupti, dignissimos harum nesciunt facere. Eveniet amet, numquam, explicabo iusto harum sint sapiente voluptatibus beatae doloribus delectus modi aspernatur dicta. Eaque inventore eius, repellat dolorum magni quibusdam modi.

Examples

Usage

Null JS

HTML |

<div class="null-tabs-container null-box-shadow null-border-radius null-background-white">
      
<div class="null-tabs-links null-background-light-grey null-display-flex null-flex-wrap-wrap">
     <a data-tab-target="#tab1"  href="#tab1" class="null-tab null-cursor-pointer null-text-align-center" aria-label="Description">Description</a>
     <a data-tab-target="#tab2"  href="#tab2" class="null-tab null-cursor-pointer null-text-align-center" aria-label="Examples">Examples</a>
     <a data-tab-target="#tab3"  href="#tab3" class="null-tab null-cursor-pointer null-text-align-center" aria-label="Usage">Usage</a>
     <a data-tab-target="#tab4"  href="#tab4" class="null-tab null-cursor-pointer null-text-align-center" aria-label="Null JS">Null JS</a>
</div><!--End null-tabs-links -->
          
    
<div class="null-tabs">
          
          <div id="tab1" data-tab-content>

            <h1 class="null-tabs-title null-margin-top-10 null-font-size-18">Description</h1>

            <div class="null-tabs-content-container">
              <p class="null-text-align-justify null-color-grey "> Lorem ipsum ... </p>
            </div><!--End null-tabs-content-container-->

          </div><!--End data-tab-content-->
          
          
          <div id="tab2" data-tab-content>

            <h1 class="null-tabs-title null-margin-top-10 null-font-size-18">Examples</h1>

            <div class="null-tabs-content-container">
              <p class="null-text-align-justify null-color-grey "> Lorem ipsum ... </p>
            </div><!--End null-tabs-content-container-->

          </div><!--End data-tab-content-->

          <div id="tab3" data-tab-content>

            <h1 class="null-tabs-title null-margin-top-10 null-font-size-18">Usage</h1>

            <div class="null-tabs-content-container">
              <p class="null-text-align-justify null-color-grey "> Lorem ipsum ... </p>
            </div><!--End null-tabs-content-container-->

          </div><!--End data-tab-content-->


          <div id="tab4" data-tab-content>

            <h1 class="null-tabs-title null-margin-top-10 null-font-size-18">Null JS</h1>

            <div class="null-tabs-content-container">
              <p class="null-text-align-justify null-color-grey "> Lorem ipsum ... </p>
            </div><!--End null-tabs-content-container-->

          </div><!--End data-tab-content-->


</div><!--End null-tabs-->
    
</div><!--End null-tabs-container-->

Modal

Progress Bar