JSFiddle - React, Tailwind, and code Playground

by Shang WenLong

HTML

<li class="test">    <div class="link" style="display:none">
                <span class="toggle"><a href="#">link</a></span>
                                    </div>
    <div class="togglediv"><p>lorem ipsum</p></div>
</li>

JavaScript

jQuery(document).ready(function($){
                  $('.test').bind('mouseenter mouseleave', function(e){

                      var fade_type = e.type == 'mouseenter' ? 'fadeIn' : 'fadeOut';
                      $(this).find('.link')[fade_type]();

                  }).find('.toggle a').click(function(){
$(".togglediv").hide();
      $(this).toggleClass("active").closest("div").next().slideToggle("slow");
    return false;
    });
    });