JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="accordion">
        <h3>Product x</h3>
        <div class="tabs">
            <ul>
                <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
                <li><a href="" class="tabpanellink">General product info</a></li>
                <li><a href="" class="tabpanellink">End user info</a></li>
            </ul>
            <div class="tabpanel">
                general info for product x.
            </div>
            <div class="tabpanel">
                end user info product x.
            </div>
        </div>
        <h3>Product y</h3>
        <div class="tabs">
            <ul>
                <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
                <li><a href="" class="tabpanellink">General info</a></li>
                <li><a href="" class="tabpanellink">End user info</a></li>
            </ul>
            <div class="tabpanel">
                general info for product y.
            </div>
            <div class="tabpanel">
                end user info product y.
            </div>
        </div>
    </div>

JavaScript

$(".tabpanellink").each(
    function(uniqueindex){
        $(this).attr('href', '#tab-' + uniqueindex);
        uniqueindex++;
    }
);
uniqueindex = 0;
$(".tabpanel").each(
    function(uniqueindex){
        $(this).attr('id', 'tab-' + uniqueindex);
        uniqueindex++;
    }
);

$(".tabs").tabs();