Collection of free jQuery tab code examples from Codepen, Github and other resources. Update of March 2021 collection. 1 new item.
Related Articles
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Tabbed Video Module
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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
Links
Made with
- HTML / CSS / JS
About a code
Tab
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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
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
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
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
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
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
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
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
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
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
Links
Made with
- HTML / CSS (Less) / JS
About a code
Tabs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
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: -
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Sexy Tabs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
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
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
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