Collection of free jQuery tab code examples from Codepen, Github and other resources. Update of March 2021 collection. 1 new item.

Related Articles

  1. CSS Tabs
  2. Bootstrap Tabs
  3. JavaScript Tabs
  4. React Tabs
  5. Tailwind Tabs
  6. Vue Tabs

Author

  • Erika Lewis

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Tabbed Video Module

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amanda

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

jQuery Tabs - Dynamic Animated Line

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • shehroz

Links

Made with

  • HTML / CSS / JS

About a code

Tab Slider

Tab slider in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Sparklingman

Links

Made with

  • HTML / CSS / JS

About a code

Tab

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Joshua Ward

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

App Navigation With jQuery And CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Zed Dash

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Expanding Flex Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Julie Park

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Setting Tabs

Hulu settings redesign. Toggle between the tabs on the left hand bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, jquery.js

Author

  • Richard Gonyeau

Links

Made with

  • HTML / CSS / JS

About a code

Featured Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, jquery.js, bootstrap.js

Author

  • Jay Pick

Links

Made with

  • HTML / CSS / JS

About a code

Tabs

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

Author

  • aklima iren

Links

Made with

  • HTML / CSS / JS

About a code

Tab With OnClick Step Effect

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

Author

  • Praveen Kumar Gorakala

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scroll For Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, jquery.js, jquery-ui.js, bootstrap.js

Author

  • Derek Palladino

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Toggle Tabs

Toggle switch style tab navigation. Currently only works with two tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Benjamin Koehler

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Accordion/Tabs With Animation

A simple tabs/accordions solution with jQuery, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Biliana

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Flying Cards Tabs

Cards flying away randomly.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Author

  • Hilo

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Tab UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, jquery-ui.js

Author

  • Nikita Jadhao

Links

Made with

  • HTML / CSS (Less) / JS

About a code

Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Andy Tran

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Tabs Modal in jQuery

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

Responsive: no

Dependencies: -

Author

  • Lewi Hussey

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Adaptive Tabs

Tabs that animate to the height of their content when switched.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Srdjan Pajdic

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sexy Tabs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Derek Wheelden

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Sliding Tab Box Things

Just a transition-y thing for hidden content areas.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Chris Coyier

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Transformer Tabs

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

Author

  • Alex Lime

Links

Made with

  • HTML / CSS / JS

About a code

Light Tabs

Light tabs in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js