Easy Tabbed Interfaces With Prs-Tab.js

Preview:

Description:

prs-tab.js is a lightweight JavaScript library that lets you easily create and manage tabbed content on your website.

By adding a few HTML elements with specific classes, you can turn any set of content into clickable tabs that switch between different content panels.

This provides a clean way to organize and toggle between different chunks of related information on a page.

How to use it:

1. Load the minified version of the Prs-Tab.js in the document.

<script src="js/prs-tab.min.js"></script>

2. Create a list with the class ‘prs-tab’ for your tabs and associate each tab with content sections by using ‘div’ elements.

<!-- Tabs -->
<ul class="prs-tab"></ul>
  <li to="tab1">Tab 1</li>
  <li to="tab2">Tab 2</li>
  <li to="tab3">Tab 3</li>
</ul>
<!-- Tabbed Content -->
<div class="prs-tabs" id="tab1">
  Tab 1 content
</div>
<div class="prs-tabs" id="tab2">
  Tab 2 content
</div>
<div class="prs-tabs" id="tab3">
  Tab 3 content
</div>

3. Initialize the Prs-Tab.js library on document ready. Done.

var tabs;
document.addEventListener("DOMContentLoaded", () => {
  tabs = new ProdseenTab();
});