Collection
Post cover

Top 21 jQuery Tabs

Collection of free jQuery tabs. Update of December 2019 collection. 3 new items.

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback