JSFiddle - React, Tailwind, and code Playground

by alcosbarco

HTML

<div id="tabs">
<div style="display: none" >
    <ul>
        <li><a href="#tabs-1"></a>
        </li>
        <li><a href="#tabs-2"></a>
        </li>
        <li><a href="#tabs-3"></a>
        </li>
    </ul>
</div>    
    <div id="tabs-1" >
        <p> 1111</p>
    </div>
    <div id="tabs-2">
        <p>22222222222</p
        <a href='#tabs' class='next-tab mover' rel='2'><input type="button"/></a>
    </div>
    <div id="tabs-3">
        <p>33333333</p>
    </div>
</div>

JavaScript

jQuery(function ($) {
    var $tabs = $('#tabs').tabs();

    $(".ui-tabs-panel").each(function (i) {

        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            next = i + 1;
            $(this).append("<div class='next_button'><a href='#tabs' class='next-tab mover' rel='" + next + "'>Next</a></div>");
        }

        if (i != 0) {
            prev = i - 1;
            $(this).append("<div class='prev_button'><a href='#tabs' class='prev-tab mover' rel='" + prev + "'>Back</a></div>");
        }

    });

    $('.next-tab, .prev-tab').click(function () {
        $tabs.tabs("option", "active", $(this).attr("rel"));

    });
});