JSFiddle - React, Tailwind, and code Playground

by henesnarfel

HTML

<div style="background-image:url('Images/RedPodHeader.jpg'); background-repeat:no-repeat; width: 360px; height:23px; background-color: red;">
  <span class="podTitles">Overview</span>
  <span style="float: right; padding-right: 10px;">
     <a href="javascript:void(0);" onclick="return changeheight(this);" id="morelink">more</a></span>
</div>
<div style="height: 150px; width: 338px; padding: 10px; border-bottom: 1px solid silver; border-left: 1px solid silver; border-right: 1px solid silver; overflow: hidden;" id="overviewtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis iaculis dignissim. Donec quis semper risus. Nam posuere venenatis posuere. Ut vehicula nulla sit amet risus aliquet aliquet. Donec commodo ante ut eros iaculis porttitor. Sed consequat ante et est adipiscing porta a nec urna. Pellentesque enim mi, vulputate ut venenatis ac, fringilla ut nibh. Vivamus ut dignissim orci. Nullam laoreet volutpat est nec consequat. Sed sodales cursus ligula et eleifend. Morbi lacinia odio eget purus tempus quis fringilla tortor elementum. Sed adipiscing enim tortor, sit amet rutrum arcu.
</div>

CSS

.podTitles{
    float:left;
    clear:none;
    font-size:12px;
    font-weight:bold;
    color:#3A3938;
    line-height:23px;
    margin-left:10px;
}

JavaScript

function changeheight(_this) {
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        var curHeight = $('#overviewtext').height();
        $('#overviewtext').css('height', 'auto');
        var autoHeight = $('#overviewtext').height();
        $('#overviewtext').css('height', curHeight + 'px');
        
        $('#overviewtext').animate({
            'height': autoHeight + "px"
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {
        
        $('#overviewtext').animate({
            'height': '150px'
        }, 600);
        
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
 
    return false;
};