Author: | john-doherty |
---|---|
Views Total: | 781 views |
Official Page: | Go to website |
Last Update: | November 30, 2020 |
License: | MIT |
Preview:

Description:
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; }