Minimal Tabs Library Using Declarative Markup – declarative-tabs

Preview:

Description:

A minimal, clean tabs JavaScript library that simply uses HTML attributes to define tabs and content.

Tabs and content can be styled freely using CSS without impacting core functionality.

How to use it:

1. Wrap your tabbed content in the DIV and define the associated tabs using the data-tab attribute:

<div data-tab="Rust">Hello, Rust!</div>
<div data-tab="C++">Hello, C++!</div>
<div data-tab="Java">Hello, Java!</div>

2. Load the declarative-tabs’ JavaScript and CSS files in the document.

<link href="simple-tabs.css" rel="stylesheet">
<script src="simple-tabs.js"></script>

3. Initialize the declarative-tabs and done.

initSimpleTabsDeclarative();

4. Override the default CSS styles to fit your design requirements.

.simple-tabs .tab-button {
  display: inline-block;
  position: relative;
  bottom: -1px;
  padding: 5px 10px;
  cursor: pointer;
}
.simple-tabs .tab-button.active {
  border: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 5px 5px 0 0;
}
.simple-tabs .tab-content {
  display: none;
  border: 1px solid gray;
  border-radius: 0 0 5px 5px;
  padding: 10px;
  width: 200px;
}
.simple-tabs .tab-content.active {
  display: block;
}

5. You can also implement the tabs interface by using CSS classes as follows:

<div class="simple-tabs">
  <div class="tab-button">Rust</div><div class="tab-button">Java</div><div class="tab-button">C++</div>
  <div class="tab-content">Hello, Rust!</div>
  <div class="tab-content">Hello, C++!</div>
  <div class="tab-content">Hello, Java!</div>
</div>

initSimpleTabs();