JSFiddle - React, Tailwind, and code Playground

by Glenn Marks

HTML

<section id="maincontainer">
    <div data-tab="Description">BLAH</div>
    <div data-tab="Brand">More Blah</div>
    <div data-tab="Warranty">EVEN MORE BLAH</div>
    <div>THIS IS GETTING ANNOYING</div>
</section>

JavaScript

$.fn.Tabs = function(options) {
    var $t = $(this),
        TabLoopCount = 0,
        TabSettings = $.extend({
            ContainerClass: "Tabs",
            TabContainerClass: "TabConainter",
            SelectedTabClass: "ActiveTab"
        }, options);
    if ($t.children().length > 1) {
        $t.prepend("<ul class=\"" + TabSettings.TabContainerClass + "\"/>"), $t.children().not("ul").wrapAll("<div class=\"" + TabSettings.ContainerClass + "\" />").hide().each(function() {
            TabLoopCount += 1;
            $("." + TabSettings.TabContainerClass, $t).append("<li>" + (($(this).data("tab")) ? $(this).data("tab") : TabLoopCount));
        });
        $("ul." + TabSettings.TabContainerClass + " li", $t).on("click", function() {
            $("ul." + TabSettings.TabContainerClass + " li", $t).removeClass(TabSettings.SelectedTabClass), $(this).addClass(TabSettings.SelectedTabClass), $("." + TabSettings.ContainerClass, $t).children().hide().eq($(this).index()).show();
        }), $("ul." + TabSettings.TabContainerClass + " li", $t).eq(0).trigger("click");
    }
};

$("#maincontainer").each(function() {
    $(this).Tabs();
});