JSFiddle - React, Tailwind, and code Playground
HTML
<span class="HoverShow"><a href="javascript:ToggleDivs('1')">Toggle Div</a></span>
<span class="HoverShow"><a href="javascript:ToggleDivs('2')">Toggle Div</a></span>
<div id="ToggleDiv1">
Stuff
</div>
<div id="ToggleDiv2">
Stuff2
</div>
JavaScript
$(document).ready(
function ()
{
$('div[id^="ToggleDiv"]').hide();
$('.HoverShow > a').css('visibility','hidden');
$('.HoverShow').css('background-color','#EEEEEE');
$('.HoverShow').hover(
function ()
{
$(this).find('a').css('visibility','visible');
$(this).css('background-color','');
},
function ()
{
$(this).find('a').css('visibility','hidden');
$(this).css('background-color','#EEEEEE');
});
});
function ToggleDivs(id)
{
if ($('#ToggleDiv'+id).is(':hidden'))
$('#ToggleDiv'+id).show();
else
$('#ToggleDiv'+id).hide();
}