Build JavaScript Tabs [The Easy Way]

JavaScript Tabs

If you’re a WordPress developer building custom WordPress websites, you may find yourself in a situation where you need to create tabs. Here is a simple way to do this with HTML, CSS, javascript, and jQuery.


<div class="tabs">
  <ul class="tab-header">
    <li class="active tab-header-item">
      <a href="#tab-1">Tab 1</a>
    <li class="tab-header-item">
      <a href="#tab-2">Tab 2</a>
  <div class="tab-content active" id="tab-1">
    Tab 1 content
  <div class="tab-content" id="tab-2">
    Tab 2 content

2. CSS

.tab-header {
  list-style: none;
  display: flex;
  padding-left: 0;
  margin: 0;

.tab-header a {
  padding: 10px 20px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-bottom: 0;
  color: #000;
  display: block;

.tab-header li a:hover,
.tab-header a {
  background-color: #00aaff;
  color: #fff;

.tab-header li:not(:last-of-type) a {
  border-right: 0;

.tab-content {
  display: none;
  border: 1px solid #ddd;
  padding: 20px;
} {
  display: block;

3. JavaScript

(function($) {
   $(function() {
      $('.tab-header a').click(function(e) {
        var $el = $(;
        var $target = $($el.attr('href'));
        var $parent = $el.closest('.tabs');

Final Result

Here is the final result in action

See the Pen JavaScript Tabs by Andriy (@angay9) on CodePen.


That’s it, that’s how you can easily create a tabs widget for your site.

About The Author

Andriy Haydash

Andriy Haydash

Andriy Haydash is a WordPress Expert who helps people build and launch successful WordPress membership and e-learning websites.

Note: Not all of the articles are written directly by me.
Affiliate Disclaimer: Some links in the post may be my affiliate links

The Ultimate Managed Hosting Platform

Before YOU Leave...
Join My Newsletter

Get practical tips & tricks on how to start, grow and market your course/membership site.