JSFiddle - React, Tailwind, and code Playground

by Israel Brewster

HTML

<button value="tab1View" class="tabButton current" id="tab1Tab">Tab 1</button>
<button value="tab2View" class="tabButton" id="tab2Tab">Tab 2</button>
<hr>
<div class="tabDiv" id="tab1View">This is tab 1
    <br />There is a form on this tab. This form must be validated and submitted successfully before switching to tab 2.</div>
<div class="hidden tabDiv" id="tab2View">This is tab 2
    <br/>The contents of this tab depend on the form in tab 1 having been successfully ssubmitted to the server.</div>

CSS

#tabs {
    margin:0px;
    padding:0px;
    padding-bottom:-1px;
    width:100%;
    border-bottom:1px solid #C9C9C9;
    margin-bottom:5px;
    position:relative;
    z-index:1;
}
.tabButton {
    margin:0px;
    margin-right:3px;
    padding:5px;
    border:1px solid #C9C9C9;
    background-color:#EAEAEA;
    background: linear-gradient(to top, #FFFFFF, #DBDBDB);
    position:relative;
    top:1px;
    z-index: 2;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
button.tabButton:not(.current):hover {
    background-color:#DFDFDF;
    border-left-color: #878787;
    border-top-color: #878787;
    border-right-color: #878787;
}
.tabButton.current {
    background-color:white;
    border-bottom:1px solid white;
}
.tabBadge {
    width:12px;
    height:12px;
    border:2px solid white;
    padding:2px;
    background-color:red;
    color: white;
    font-size: .75em;
    position:relative;
    left:-12px;
    top:-10px;
    text-align: center;
    border-radius: 12px;
    z-index:3;
}
.hidden {
    display:none;
}

JavaScript

$(document).ready(function () {
    $('.tabButton').click(changeTab);

    //bind a "before show" function to tab 2
    $('#tab2Tab').bind('beforeShow', tab2BeforeShow);
});

function changeTab() {
    var jqButton = $(this);
    jqButton.data('show', true); //start by assuming we will show the tab.
    if (jqButton.hasClass("current")) //don't do anything if switching to the current tab
    return;

    //run the "before show" function, if any.
    jqButton.trigger('beforeShow');
    var showTab = jqButton.data('show'); //see if the show flag has been set to false

    if (showTab === false) //if no before show function, then showTab is null, not false
    return; //if false, then don't show the tab.

    $(".tabDiv").hide();

    //run any "after hide" scripts bound to the current tab
    $('.tabButton.current').trigger('afterHide');

    var requestedDiv = jqButton.val(); //the "value" of the tab button is the ID of the tab content div
    $("#" + requestedDiv).show(); //may show nothing, if no div exists for the current tab.
    $(".tabButton").removeClass("current"); //remove the current class from all tab buttons, so it will only be applied to the new current tab button.
    jqButton.addClass("current");
}

function tab2BeforeShow() {
    // run some AJAX function here. In my case, this is a ajaxForm object submit.
    // $('#SomeajaxFormObject').submit();

    var result;
    $.ajax({
        url: '/echo/json',
        type: 'POST',
        async: false,
        success: function (response) {
            alert(response);
            if (response.success) result = true; // set the result variable declared in outer function
            else result = false;
        },
        error: function () {
            result = false; // bad response - dont show new tab
        }
    });

    alert(result);

    if (result === false) {
        alert("Not showing tab due to response from ajax function");
        $(this).data('show', false);
    }
}