WebFlake is currently in the process of upgrading fully to IPS 4.2.
We are aware that various functions may not be working correctly, or missing entirely.
Please use our Bug Tracker and Suggestions Tracker to help us with this transition.

You can dismiss this message at your discretion. Thanks!

Jump to content
Sign in to follow this  
Sanctuary

Custom jQuery Tabs

Recommended Posts

Sanctuary    291

Here's a tutorial on how to create some jQuery tabs for your website.
This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things.
Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag.
 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Let's begin with the HTML.

<div class="tabs_wrap">
	<ul>
		<li class="active"><a href="#">Tab 1</a></li>
		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 3</a></li>
	</ul>
	<div class="tabs_content">
		<div>
			Tab content #1.
		</div>
		<div>
			Tab content #2.
		</div>
		<div>
			Tab content #3.
		</div>
	</div>
</div>

I'll be using 3 tabs for this tutorial.

Right now, this is what it looks like:

37414632996013def.png

Let's go ahead and style that with some CSS.
You'll want something along these lines:

.tabs_wrap > ul { margin-bottom: 5px; }
.tabs_wrap > ul > li {
	display: inline-block;
	text-align: center;
	background-color: #2C93FA;
	border-radius: 3px;
}

.tabs_wrap > ul > li.active a { background-color: rgba(0, 0, 0, 0.25); }
.tabs_wrap > ul > li a {
	color: #fff;
	display: block;
	padding: 5px 8px;
}

.tabs_wrap .tabs_content > div:not(:first-child) { display: none; }

Here's what it looks like with the CSS applied:

37414633005762d44.png

A pretty simple layout. If you have some CSS knowledge, you can of course tweak it to your liking.
While it looks pretty and whatnot right now, it's not complete - it still doesn't actually work!
To make it fully functional, we'll need to apply our jQuery.

For the sake of time, I'll be leaving comments inside the code itself instead of explaining it step-by-step.
Here's the jQuery we're gonna be using:

$(document).ready(function() {

	// When we click a tab...
	$(".tabs_wrap > ul > li > a").click(function(e) {
		// Since the <a> tag has a "#" as the href
		// We want to prevent it from taking us to the top of the screen
		e.preventDefault();

		// If this tab is the currently active one, don't continue the code
		if ($(this).parent().hasClass("active")) { return; }

		// Grab the index of the current tab
		var tab_index = $(this).parent().index();

		// Find the current active tab and remove the "active" class from it
		$(this).closest(".tabs_wrap").find("li.active").removeClass();

		// Add the "active" class to the tab we clicked
		$(this).parent().addClass("active");

		// Inside the .tabs_content div, find the visible <div> and make it fade out
		$(this).closest(".tabs_wrap").find(".tabs_content > div:visible").stop().fadeOut(250, function() {
			// As soon as the previously visible <div> is done fading out
			// Find the <div> we wanted to show and fade it in
			$(this).closest(".tabs_wrap").find(".tabs_content > div").eq(tab_index).stop().fadeIn(250);
		});
	});

});

And then you're done!
Here's what the final product will look like:

374146330088827cb.png

It looks about the same as the screenshot after applying the CSS, but it is now fully functional and can be clicked around with no problem. :)
You can also use this multiple times on a single page. Enjoy!

Code and tutorial by Sanctuary.

Edited by Sanctuary
Updated with better code.

Share this post


Link to post
Share on other sites
Xing    15
12 hours ago, Sanctuary said:

If set up correctly, it could, yep. :)

Hahah yes I did using blocks.

Share this post


Link to post
Share on other sites
Sanctuary    291

Update - I've updated the OP with better code! The previous one was a bit ehh, but this version should be much better (it's also 6 lines shorter). You can also now use it multiple times on a single page! :D Here's an example screenshot:

3741476037962bb3b.png

I also swapped out the sliding effect with a fade effect, since a sliding effect on larger <div>'s may not work as well, but you can adjust that yourselves, if you wish.

@Xing - In case you're interested. :P

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×