Minimal SEO-friendly Tabs In JavaScript

A minimal, clean, SEO-friendly tabs component built on top of JavaScript and semantic HTML tags.

It also allows tabs to change the browser URL hash when switching between them.

How to use it:

1. Load the needed JavaScript and CSS files in the document.

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

2. The HTML structure for the tabs component.

• data-seo-tabs: initialize the tabs component without JS call
• data-hashable: auto change the browser URL hash
• data-active: determine if the tab is active on page load

<div data-seo-tabs="true" data-hashable="true">
  <a href="#one" data-tabtop="true" data-active="true">Tab 1</a>
  <a href="#two" data-tabtop="true">Tab 2</a>
  <a href="#three" data-tabtop="true">Tab 3</a>
  <div id="one" data-tabbox="true" data-active="true">
    Tab Content 1
  </div>
  <div id="two" data-tabbox="true">
    Tab Content 2
  </div>
  <div id="three" data-tabbox="true">
    Tab Content 3
  </div>
</div>

3. Override the default styles of the tabs component.

[data-seo-tabs="true"] {
  margin: 10px 0 !important;
}
[data-seo-tabs="true"] [data-tabtop="true"] {
  margin: 0;
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}
[data-seo-tabs="true"] [data-tabtop="true"][data-active="true"] {
  background: #ccc;
  color: #333;
  font-weight: 400;
}
[data-seo-tabs="true"] [data-tabtop="true"]:not([data-active="true"]):hover {
  background: #cccccc33;
}
[data-seo-tabs="true"] [data-tabbox="true"] {
  display: none;
  white-space: normal;
  overflow: auto;
  clear: both;
  padding: 20px;
  margin: 0;
  background: #ccc;
  border: 1px solid #ccc;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
[data-seo-tabs="true"] [data-tabbox="true"][data-active="true"] {
  display: block;
}