john-doherty / seo-tabs

Simple SEO friendly tabs (1k of pure JS)

seo-tabs

Simple SEO friendly tabs (1k of pure JS). Goals:

• Keep it really f'kin simple
• Minimal (semantic) HTML
• Intuitive markup
• Set default tab without JS
• SEO friendly (crawlable + minimal js)
• 0 CSS conflicts (uses HTML5 data-* attributes)
• Bookmarkable (add data-hashable="true")

Try it 👉 orcascan.com

Usage

Add the seo-tabs.min.js and seo-tabs.min.css files to your page:

<script src="path-to/seo-tabs.min.js"></script>
<link href="path-to/seo-tabs.min.css" />

Add the minimal, semantic markup for your tabs:

<div data-seo-tabs="true" data-hashable="true">
    <a href="#one" data-tabtop="true" data-active="true">One</a>
    <a href="#two" data-tabtop="true">Two</a>
    <a href="#three" data-tabtop="true">Three</a>
    <div id="one" data-tabbox="true" data-active="true">
        Hello from tab box 1
    </div>
    <div id="two" data-tabbox="true">
        Hello from tab box 2
    </div>
    <div id="three" data-tabbox="true">
        Hello from tab box 3
    </div>
</div>

Override default style using CSS:

/* tap tops */
[data-seo-tabs="true"] [data-tabtop="true"] {
    border: 1px solid #ccc;
    border-bottom: 0;
}

[data-seo-tabs="true"] [data-tabtop="true"][data-active="true"] {
    background: #ccc;
    color: #333;
}

/* tab boxes */
[data-seo-tabs="true"] [data-tabbox="true"] {
    background: #ccc;
    border: 1px solid #ccc;
}

[data-seo-tabs="true"] [data-tabbox="true"][data-active="true"] {
    background: #ccc;
}

The above code produces:

Contributing

1. Fork it!
2. Create a branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request 💪

Development

The project includes everything you need to tweak, including a node webserver. Run the following:

git clone https://github.com/john-doherty/seo-tabs
cd seo-tabs
npm install
npm start

Then visit http://localhost:8080 in your browser.

Update .min files

Update the minified files from source by increasing the version number in package.json and run the following:

npm run build

Star the repo

If you use this useful please star the repo, it helps me prioritize which open source issues to tackle first.

History

For change-log, check releases.

License

Licensed under MIT License © John Doherty