JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="tabsMenuVert">
<li><a href="#suspendisse">Suspendisse</a></li>
<li><a href="#vivamus">Vivamus</a></li>
</ul>
<div class="tabsWrapperVert">
<div id="suspendisse" class="tabsContentVert">
Lorem ipsum
</div>
<div id="vivamus" class="tabsContentVert">
Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus,
nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede.
Vivamus ligula ipsum, faucibus at.
</div>
</div>
JavaScript
// Tabs Function
$(".tabsContentVert").hide();
var containers = $(".tabsContentVert").hide(),
showContainer = $(location.hash||".tabsContentVert:first").show(),
tabs = $("ul.tabsMenuVert li"),
tab = tabs.eq(containers.index(showContainer)).addClass("tabsActiveVert").show();
tabs.click(function() {
tabs.removeClass("tabsActiveVert");
$(this).addClass("tabsActiveVert").siblings().removeClass("tabsActiveVert");
containers.hide();
var activeTab = $("a:first", this).attr("href");
$(activeTab).show();
return false;
});
$(".tabsMenuVert a").click(function() {
if(this.hash === "#vivamus") {
alert('test');
}
});