Here is a constantly updated list of the 10 best JavaScript and CSS based tabs components (tabbed interfaces) we published on CSSScript.com.
I hope you like it and don’t forget to spread the world.
Originally Published Nov 13 2017, updated Mar 21 2021
1. Responsive Vertical Tabs For Bootstrap 4
A pure CSS extension that creates vertically-oriented tabs component in your Bootstrap 4 project.
2. Responsive Tabbed Content With JavaScript And CSS3 – responsive-tabs
A responsive, minimal, clean tabs component that falls back to a linear content display when JavaScript is disabled.
3. Create A Responsive Tabs Component Using CSS
Just another animated, fully responsive tabs component implemented in pure CSS / CSS3 that uses radio buttons to switch between tabbed panels by clicking on the tab navigation. You will see a vertical accordion when you open the demo page on small screens.
4. Responsive CSS Only Accordion & Tabs Component
Yet another pure CSS tabs that will be automatically converted into a vertical accordion interface on mobile devices. Based on CSS flexbox and radio/label hacks.
5. Tiny Nested Tabs With Vanilla JavaScript – Tabbis.js
Tabbis.js is a lightweight, pure JavaScript library for generating nice, clean, nested tabs from plain HTML structure.
6. Creating A Stylish Tabs Control Using Pure CSS / CSS3
A pretty cool, animated tabs component / widget / control with subtle fade transition effects. Made using CSS and CSS3 transitions.
7. Responsive Tabs/Accordion In Vanilla JavaScript
A native JavaScript plugin to generate mobile-friendly horizontal or vertical tabs from unordered HTML lists.
8. Animated Tabs Component In Pure CSS – Tabsy CSS
A simple, animated, responsive tabs component built using CSS/CSS3 and radio+label tricks.
9. a11y-accordion-tabs
A flexible, customizable, responsive, mobile-friendly, WAI-ARIA compliant tabs & accordion component for the web.
10. Nice Clean Tabs Component Using Pure HTML / CSS
Just another pure HTML/CSS implementation of a nice clean tabs component with an animated current-tab indicator.
More Resources:
To find more JavaScript and/or CSS libraries to showcase your in a toggleable container, don’t forget to check out our other awesome resources.