JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div class="company" id="company_1">
    <p>some content goes here1</p>
</div>
<div class="company" id="company_2">
    <p>some content goes here2</p>
</div>
<div class="company" id="company_3">
    <p>some content goes here3</p>
</div>
<div id="company_container"> <a title="" href="#"><img data-title="#company_1" src="test.jpg" /></a>
 <a title="" href="#"><img data-title="#company_2" src="test2.jpg" /></a>
 <a title="" href="#"><img data-title="#company_3" src="test3.jpg" /></a>

</div>

JavaScript

jQuery('document').ready(function () {

    jQuery('.company').not(':first').hide();

    jQuery('#company_container img').hover(function () {

        var contenttoShow = jQuery(this).attr('data-title');

        contenttoShow2 = jQuery(contenttoShow);
        jQuery('.company').hide();
        contenttoShow2.fadeIn(500);
    });

});