JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bigpanel">
    <div id="tabs">
    <div id="fragment-1" class="ui-tabs-panel">Frag. 1</div>  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">Frag. 2</div>
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">Frag. 3</div>
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">Frag. 4</div>
    </div>

    <div id="banerprods">
    <h2><a href="#"> Drinks </a> /<a href="#"> Food </a>/<a href="#"> Misc</a></h2>
    <div id="prodsmiddle">
    <table width="880" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-1">1</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-2">2</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-3">3</a></li></td>
    <td><li class="ul-buttom ul-buttom-hide"><a href="#fragment-4">4</a></li></td>
    </tr>
    </table>
    </div>

CSS

.ui-tabs-hide {
    display : none;
}

JavaScript

$(function(){
    $(".ui-tabs-panel").hide();
    
    $(".ul-buttom.ul-buttom-hide").children().click(function () {
        var divname = $(this).attr('href');
        $(divname).show("slow").siblings().hide("slow");
    });
});