Top 21 jQuery Tabs
Collection of free jQuery tabs. Update of December 2019 collection. 3 new items.
Collection
jQuery Tabbed Video Module
Author: Erika Lewis
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
jQuery Tabs - Dynamic Animated Line
Author: Amanda
Links: demo and code
Made with: HTML / CSS (SCSS) / JS (Babel)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css
Tab Slider
Author: shehroz
Links: demo and code
Made with: HTML / CSS / JS
Tab slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
App Navigation With jQuery And CSS Animation
Author: Joshua Ward
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Expanding Flex Cards
Author: Zed Dash
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Setting Tabs
Author: Julie Park
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Hulu settings redesign. Toggle between the tabs on the left hand bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css, jquery.js
Featured Tabs
Author: Richard Gonyeau
Links: demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css, jquery.js, bootstrap.js
Tabs
Author: Jay Pick
Links: demo and code
Made with: HTML / CSS / JS
Pure CSS with a hint of JS. Technically, you don't need the JS as this is just to set the min-height value.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Tab With OnClick Step Effect
Author: aklima iren
Links: demo and code
Made with: HTML / CSS / JS
Bootstrap tab with onclick step effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css, jquery.js, bootstrap.js
Scroll For Tabs
Author: Praveen Kumar Gorakala
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, jquery.js, jquery-ui.js, bootstrap.js
Toggle Tabs
Author: Derek Palladino
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Toggle switch style tab navigation. Currently only works with two tabs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Accordion/Tabs With Animation
Author: Benjamin Koehler
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
A simple tabs/accordions solution with jQuery, HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Flying Cards Tabs
Author: Biliana
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Cards flying away randomly.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
Tab UI
Author: Hilo
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, jquery-ui.js
Tabs
Author: Nikita Jadhao
Links: demo and code
Made with: HTML / CSS (Less) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Tabs Modal in jQuery
Author: Andy Tran
Links: demo and code
Made with: HTML (Pug) / CSS (SCSS) / JS
This is a Material inspired tabs modal that gives the user a smooth transition between each panel. The navigation features the iconic Material Design Ripple effect, along with a border that slides around to give the user a hint of which tab is active.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Adaptive Tabs
Author: Lewi Hussey
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Tabs that animate to the height of their content when switched.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Sexy Tabs
Author: Srdjan Pajdic
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Sliding Tab Box Things
Author: Derek Wheelden
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
Just a transition-y thing for hidden content areas.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Transformer Tabs
Author: Chris Coyier
Links: demo and code
Made with: HTML / CSS (SCSS) / JS
One set of semantic HTML. One set of JS. Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Light Tabs
Author: Alex Lime
Links: demo and code
Made with: HTML / CSS / JS
Light tabs in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
