I need to implement multiple tabs on a single page, how do I modify the code to make this possible?
Take a look at the codepen for reference.
Here is the jquery code I have written so far:
var tabs = $(".tabContainer ul li a");
$(".tabContents.active").show();
tabs.click(function (event) {
event.preventDefault();
if (!$(this).hasClass("active")) {
var tabId = $(this).attr("href");
tabs.removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(tabId).fadeIn();
}
});
I assume that I should encapsulate this in a function and call it using a unique id for each tab container?
Please overlook the basic html and css, this is just a draft version of the actual project.