Techolac - Computer Technology News
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games
No Result
View All Result
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games
No Result
View All Result
Techolac - Computer Technology News
No Result
View All Result
Home Wordpress

Creating Tabs with HTML, CSS & jQuery

by Editorial Staff
November 7, 2018
in Wordpress
Reading Time: 9 mins read

[ad_1]

In this tutorial, we’re going to look at how to create tabs in HTML, CSS and jQuery. If you get stuck, don’t hesitate to ask me a question.

Tabs are a great way of grouping lots of content into a very small space. Think of tabs like the TARDIS…bigger on the inside. They can be incredibly handy when you have a lot of content that would simply fill up your page with too much information in one go.

You might also like: Creating an Accordion with HTML, CSS & jQuery.

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the jQuery

1.) The HTML

Completed Code (HTML)

I go into detail on the specifics of the HTML layout below.

<div class="tabs">
	<ul class="tab-links">
		<li class="active"><a href="#tab1">Tab #1</a></li>
		<li><a href="#tab2">Tab #2</a></li>
		<li><a href="#tab3">Tab #3</a></li>
		<li><a href="#tab4">Tab #4</a></li>
	</ul>

	<div class="tab-content">
		<div id="tab1" class="tab active">
			<p>Tab #1 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
		</div>

		<div id="tab2" class="tab">
			<p>Tab #2 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
		</div>

		<div id="tab3" class="tab">
			<p>Tab #3 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
		</div>

		<div id="tab4" class="tab">
			<p>Tab #4 content goes here!</p>
			<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
		</div>
	</div>
</div>

Tab Links

Starting off there’s a div with class="tabs". Inside there’s an unordered list, (or an ordered one if you like, it makes no real difference), with class="tab-links". Inside the list items there are anchor links. The first list item is marked as class="active". This indicates where to start the tabs.

Note: When the CSS is all done, the tab link parent with class="active" will be the highlighted one on page load.

<div class="tabs">
	<ul class="tab-links">
		<li class="active"><a href="#tab1">Tab #1</a></li>
		<li><a href="#tab2">Tab #2</a></li>
		<li><a href="#tab3">Tab #3</a></li>
		<li><a href="#tab4">Tab #4</a></li>
	</ul>
</div>

Tab Content

There’s a div with class="tab-content". Inside of that, we have 4 divs, each with class="tab", (this number corresponds to how many tab links there are). The currently visible tab will also need an active class, e.g. class="tab active".

<div class="tab-content">
	<div id="tab1" class="tab active">
		<p>Tab #1 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
	</div>

	<div id="tab2" class="tab">
		<p>Tab #2 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
	</div>

	<div id="tab3" class="tab">
		<p>Tab #3 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
	</div>

	<div id="tab4" class="tab">
		<p>Tab #4 content goes here!</p>
		<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
	</div>
</div>

2 The CSS

I’m going to keep it simple with basic CSS (as opposed to an SCSS pre-processor like Sass, Less or Stylus). The bulk of this tutorial is aimed at beginners, so I’m taking that into account.

See also  Benefits of Managed WordPress Hosting

Completed Code (CSS)

I go into detail on the specifics of the CSS styling below.

/*----- Tabs -----*/
.tabs {
	width:100%;
	display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
	.tab-links:after {
	display:block;
	clear:both;
	content:'';
}

.tab-links li {
	margin:0px 5px;
	float:left;
	list-style:none;
}

.tab-links a {
	padding:9px 15px;
	display:inline-block;
	border-radius:3px 3px 0px 0px;
	background:#7FB5DA;
	font-size:16px;
	font-weight:600;
	color:#4c4c4c;
	transition:all linear 0.15s;
}

.tab-links a:hover {
	background:#a7cce5;
	text-decoration:none;
}

li.active a, li.active a:hover {
	background:#fff;
	color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
	padding:15px;
	border-radius:3px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
	background:#fff;
}

.tab {
	display:none;
}

.tab.active {
	display:block;
}

Tabs Container

The display:inline-block; adds a type of clearfix while also making it more ‘stable’ than if we used display:block;.

The reason we use a clearfix above yet not here is as follows: display:inline-block; sometimes adds 7px-ish of margin below the affected element with no way of removing it. Sometimes using a minus bottom margin works, but it depends heavily on how your HTML is structured. In this instance it’s fine.

/*----- Tabs -----*/
.tabs {
	width:100%;
	display:inline-block;
}

Tab Link Wrappers

We declare no list-style to stop it appearing as a default list. Then the margin so the links are spaced evenly apart, (using margin:0px 5px; is the same as using margin:0px 5px 0px 5px;).

.tab-links li {
	margin:0px 5px;
	float:left;
	list-style:none;
}

Tab Links

These are all basic styles which you should understand if you’re attempting this tutorial. If you don’t, please find the proper values and the definitions for each on the CSS-Tricks Almanac.

You may be wondering why I’ve used transition:all linear 0.15s; instead of transition:background linear 0.15s;. The reason is simple, in my experience, you have to think ahead. If you don’t then nasty, (sometimes hard to fix), bugs pop-up seemingly out of nowhere. By using background instead of all, we’d be limiting what can be transitioned on the :hover effect. Since this is a tutorial, many of you may want to change the text colour on hover. By using all instead of background that makes it possible.

.tab-links a {
	padding:9px 15px;
	display:inline-block;
	border-radius:3px 3px 0px 0px;
	background:#7FB5DA;
	font-size:16px;
	font-weight:600;
	color:#4c4c4c;
	transition:all linear 0.15s;
}

.tab-links a:hover {
	background:#a7cce5;
	text-decoration:none;
}

li.active a, li.active a:hover {
	background:#fff;
	color:#4c4c4c;
}

Tab Content

This is the background of the tab content section.

/*----- Content of Tabs -----*/
.tab-content {
	padding:15px;
	border-radius:3px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
	background:#fff;
}

Non-Active/Active Tab Content

We set all tabs to display:none; which hides them. Then we set the active tab to display:block; so only that one will show up. It’s a simple case of using CSS the way it was designed, which was to cascade down. Hence the name, Cascading Stylesheets.

.tab {
	display:none;
}

.tab.active {
	display:block;
}

You might also like: Creating a Dropdown Menu with HTML & CSS

See also  Display Custom Taxonomy Terms in WordPress

3 The jQuery

Below you can see the completed jQuery code. Keep scrolling for a good explanation of how it all works and what it all means.

Let me clarify something before we start: Everyone has their own way of coding, with jQuery this is mine. Writing it out like this makes it easier for a beginner to grasp, it’s also efficient.

Completed Code (jQuery)

jQuery(document).ready(function() {
	jQuery('.tabs .tab-links a').on('click', function(e) {
		var currentAttrValue = jQuery(this).attr('href');

		// Show/Hide Tabs
		jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

		// Change/remove current tab to active
		jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

		e.preventDefault();
	});
});

Basic Setup

You have to start by checking if the document is ready, for this we use:

jQuery(document).ready(function() {
	// Code Here
});

Next is to check if the user has clicked on a tab, to do that we simply reference every link that happens to be a tab link with .tab-links a.

jQuery('.tab-links a').on('click', function(e) {
	// More Code Here
});

Dynamic Variable

Next, we create a variable called currentAttrValue, (current attribute value), which grabs the href="" of the clicked anchor link.

var currentAttrValue = jQuery(this).attr('href');

Match Anchor Link to Div #ID

We need a way of matching up the .tab-link anchors with .tab sections. We start off by referring to the entire tabs component, with .tabs, then we say “If .tabs has a child with an #id that then matches a .tab-link href="", then they should be linked up”.

Then we say “Show the element with the referenced #id, such as #tab2, then find the other tabs, which are siblings of #tab2, and hide them”.

jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Giving The Tab Link an Active State

Changing the active state of the tab link is relatively the same as showing/hiding the tab content.

First, we look for jQuery(this), which is the current anchor link being clicked. Then we find it’s parent list item with .parent('li') tag. After that, we give that parent list item a class of .active by using .addClass('active'). Lastly, we find all siblings of that parent list item and remove, if any, classes of .active by using .siblings().removeClass('active').

jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

Prevent Default Anchor Link Behaviour

You may notice that when you click an anchor link with an #id specified instead of an actual URL, it tends to add the #id into the address bar. E.G. http://sebkay.com becomes http://sebkay.com/#id. This can be a massive pain-point for users when trying to click the back button.

See also  Tips When Creating a Wordpress Archives Page

To get past that UX problem we use:

e.preventDefault();

This handy little function stops the default action of the clicked element from happening.

Remember when we put that function(e)at the start of our click event? Well, this is where that ties in.


Extra Credit: jQuery Animations

You may not like the way it just jumps to the new tab content without any nice animation of any kind, well here’s some extra credit.

To apply these changes simply replace the below snippet with the other code snippets that follow.

Default

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Fade

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

Slide 1

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

Slide 2

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

Conclusion

If you’re reading this conclusion, (most people, including me, tend to leave after they’ve got the code they were after), then please leave a comment below with any problems or bugs regarding this tutorial. I’m writing this to help people learn and become the best they can be.

You might also like: 21 Must-Have Front End Development Tools.

[ad_2]

Related Posts

Let’s Have a Look at Some of the Best WordPress Donation Plugins?
Wordpress

Let’s Have a Look at Some of the Best WordPress Donation Plugins?

June 13, 2022
How Much Does It Cost To Build A Website In 2022?
Wordpress

How Much Does It Cost To Build A Website In 2022?

February 16, 2022
12 Best WordPress Themes for SEO
Wordpress

12 Best WordPress Themes for SEO

October 14, 2021

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

30 VUDU Alternatives To Watch Movies And TV Shows Online

30 VUDU Alternatives To Watch Movies And TV Shows Online

July 3, 2022
finland web hosting reviews

Top 10 Finland Web Hosting Reviews 2022

July 3, 2022
warehouse management systems software

Top 10 Best Warehouse Management Systems In 2022

July 2, 2022
Find Old Pensions and Boost Your Retirement Income

Find Old Pensions and Boost Your Retirement Income

July 2, 2022
Industry 4.0: Unlocking New Business Opportunities for the Manufacturing Industry

Industry 4.0: Unlocking New Business Opportunities for the Manufacturing Industry

July 2, 2022
  • DashTech
  • TechDaddy
  • Terms and Conditions
  • Disclaimer
  • Write for us

© Techolac © Copyright 2019 - 2022, All Rights Reserved.

No Result
View All Result
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games

© Techolac © Copyright 2019 - 2022, All Rights Reserved.

Go to mobile version