JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<ul >
<li><a href="#" id="fb-icon">Facebook</a>
<div id="fb-icon-content"style="display:none" class='slider'>
    This is my facebook  div
</div>
</li>
<li>
<a href="#" id="twitter-icon">Twitter</a>
<div id="twitter-icon-content"style="display:none" class='slider'>
    This is my twitter div
</div>
</li>
</ul>

CSS

li{
 float left;   
}


ul {
list-style-type: none;
height: 80px;
width: 663px;
margin: auto;
}

JavaScript

$("li a").hover(

function() {
    $('.slider').slideUp(0);
    $(this).siblings("div.slider").stop(true, true).slideDown(180);
}, function() {
    $(this).siblings("div.slider").stop(true, true).slideUp(180);
});



$("li a").click(

function() {
    $('.slider').slideUp(180);
    $(this).siblings("div.slider").slideDown('slow');
}, function() {
    $('.slider').slideDown(180);
    $(this).siblings("div.slider").slideUp('slow');
});