JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<p class='animal' id='dog'>dog url</p><div id='dog_content' class='animalcontent'>Doggiecontent!</div>
<p class='animal' id='cat'>cat url</p><div id='cat_content' class='animalcontent'>Pussiecontent!</div>
<p class='animal' id='snake'>snake url</p><div id='snake_content'class='animalcontent'>Snakecontent!</div>

CSS

.animalcontent {
    position:absolute;
    top:100px;
}

JavaScript

$('div.animalcontent').hide();
    $('div').hide();
    $('p.animal').bind('mouseover', function() {
        $('div.animalcontent').hide();
        $('#'+$(this).attr('id')+'_content').show();
    });