How To Create Tabs Component In Plain JavaScript | jTabs

jTabs is a responsive JavaScript tabs component that allows easy switching between tabs.

• Take a DOM container as a parameter
• Search tabs and sections
• and swap it

simple javascript tabs, javascript tabs library, javascript tab character, vanilla js tabs, html tabs example with code

Add Another Vanilla JavaScript Tabbed Content With Equal Height | sv-tabs-js

How to make use of it:

1. Link to JavaScript file as follows:

<script src="jtabs/jtabs.js"></script>

2. Basic HTML structure for tabs.

<main class="tabs-js">

  <div class="tabs-buttons">
    <button class="tabs-buttons__btn  tabs-buttons__btn--active  btn-js">Tab 1</button>
    <button class="tabs-buttons__btn  btn-js">Tab 2</button>
    <button class="tabs-buttons__btn  btn-js">Tab 3</button>
  </div>

  <div class="tabs-sections">
    <div class="tabs-sections__section  tabs-sections__section--active  tab-js  tab-active-js">
      <p>Section 1</p>
    </div>
    <div class="tabs-sections__section  tab-js">
      <p>Section 2</p>
    </div>
    <div class="tabs-sections__section  tab-js">
      <p>Section 3</p>
    </div>
  </div>

</main>

3. Call the jTabs function and you’re done. Required parameter: container. Additional parameters: activeBtnClass, activeTabClass.

jTabs('.tabs-js', 'tabs-buttons__btn--active', 'tab-active-js');

4. Design the tabs component with your own CSS styles.

.tab-js { display: none; }

.tab-active-js { display: block; }

.tabs-header {
  font-size: 25px;
  text-align: center;
  margin: 3rem auto;
}

.centering-layer {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
}

.tabs-buttons { font-size: 14px; }

.tabs-buttons__btn {
  display: block;
  width: 100%;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #4EC6DE;
  border-bottom-width: 0;
  color: #333;
  background-color: #fff;
  outline: none;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color .3s;
}

.tabs-buttons__btn:hover, .tabs-buttons__btn--active {
  color: #fff;
  background-color: #4EC6DE;
}

.tabs-sections {
  padding: 10px 20px;
  border: 2px solid #4EC6DE;
}

5. Make it more responsive and more user-friendly on devices with smaller screens.

@media screen and (min-width: 640px) {

.tabs-buttons { font-size: 0; }

.tabs-buttons__btn {
  width: auto;
  display: inline-block;
  font-size: 14px;
}

.tabs-buttons__btn:not(:last-child) { margin-right: 5px; }

}

Options

Simple Plain JavaScript Tabs Component, jTabs Plugin/Github

See Demo And Download

Official Website(redVi): Click Here

This superior jQuery/javascript plugin is developed by redVi. For extra Advanced Usages, please go to the official website.

Tags: jTabsredViSimple Tabstabstabs designtabs pluginvanilla js tabs