JSFiddle - React, Tailwind, and code Playground

by lolz1mkuroski

HTML

<ul class="megamenu">
    <li>
        <a href="#" data-id="sbc_1">Teste</a>
    </li>
    <li>
        <a href="#" data-id="sbc_2">Teste2</a>
    </li>
    <li>
        <a href="#" data-id="sbc_3">Teste3</a>
    </li>
    <li>
        <a href="#" data-id="sbc_4">Teste4</a>
    </li>
</ul>




<div id="megamenuContent" class="col-md-4">                                                                                                                   
    <div id="sbc_1" style="display: none;">
        <h4>Teste 01</h4>                                                      
        <p> Teste 01 aaaaaaaaaaaaaaaaaaa </p>
    </div>                                                                                                             
    <div id="sbc_2" style="display: none;">
        <h4>Teste 02</h4>                                                      
        <p> Teste 02 aaaaaaaaaaaaaaaaaaa </p>
    </div>                                                                                                        
    <div id="sbc_3" style="display: none;">
        <h4>Teste 03</h4>                                                      
        <p> Teste 03 aaaaaaaaaaaaaaaaaaa </p>
    </div>                                                                                                        
    <div id="sbc_4" style="display: none;">
        <h4>Teste 04</h4>                                                      
        <p> Teste 04 aaaaaaaaaaaaaaaaaaa </p>
    </div>
</div>

JavaScript

$(function(){
    var id;
    $('.megamenu a').mouseenter(function()
    {
	    id = '#megamenuContent #'+$(this).data("id");
	    $(id).fadeIn('slow');
    })
    .mouseleave(function()
    {
	    $(id).hide();
    });
});