JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<link rel="stylesheet" href="http://www.dialogic.com/src/dialogic.min.css">
<span class="promo trending">
<div class="trending_container">
    <div class="pad10">
<h3>$!Item.Raw('PromoTitle')</h3>
<div class="trends">

<p><a href="~/link.aspx?_id=B49B68562BE8441DB7C0DAB23E177175&amp;_z=z" shape="rect">#WebRTC video calling</a><br />
<a href="~/link.aspx?_id=462B94E5BB0646D6AC61BAE531BC8778&amp;_z=z" shape="rect">#PowerMedia XMS</a><br />
<a href="~/link.aspx?_id=EF70ACD4FC5945BDAD6081F0F7EBC6A7&amp;_z=z" shape="rect">#Network Congestion nightmares</a><br />
<a href="~/link.aspx?_id=7C2D89543C5D43F1A5A81DDF0AA488E5&amp;_z=z" shape="rect">#Network Fuel</a><br />
<a href="http://edit.dialogic.com/sitecore/shell/Controls/Rich%20Text%20Editor/~/link.aspx?_id=7C2D89543C5D43F1A5A81DDF0AA488E5&amp;_z=z" shape="rect">#Network Fuel</a><br />
<a href="http://edit.dialogic.com/sitecore/shell/Controls/Rich%20Text%20Editor/~/link.aspx?_id=7C2D89543C5D43F1A5A81DDF0AA488E5&amp;_z=z" shape="rect">#Network Fuel</a></p>
    
    
    
        </div>
    </div>
</span>

CSS

.trending{
    position:relative;
}
.trending .trending_container{
    position:absolute;
    border:1px solid grey;
    width:220px;
    height:115px;
    display:block;
    overflow:hidden;
    font-size:100%;
}
.pad10{
    padding:10px;
}
.trending h3{
    font-size:120%;
    border-bottom:1px dotted grey;
    padding-bottom:5px;
    margin-bottom:5px;
}

JavaScript

$trending = $('.trending .trending_container');
var h = $trending.find('.trends').height()+60;
if(h > 115){
    $trending.on('mouseenter',function(){        
        $(this).animate({height:h});
    })
    
    $trending.on('mouseleave',function(){
        $(this).height(115);
    })
}