JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<div id="contentSummary" style="width:367px; height:70px; float:left; margin-left:20px; font-family:arial; font-size:11px; font-weight:normal; text-decoration: none; color:#333333; line-height:20px; padding-top:5px;">am reluctantly selling my 1982 MGB Roadster as I'm moving unexpectedly to   Germany (I'm a serving Army Officer). Consequently I'm having to sell all of my   classic cars. MOT'D TILL APR 11, TAXED UNTIL NOV 10.<br /> 
                  <br /> 
                </div> 
              <div style="width:390px; height:30px; float:right; background-color:#333333;" class="mycontrols"> 
              <a style="cursor:pointer; color:#0066FF; padding-top:0px; float:left;" > 
              <img id="readMore" src="images/read_more_botton.jpg" width="116" height="23" /> 
              </a> 
              <a style="cursor:pointer; color:#0066FF; float:right;" > 
              <img id="minimize" src="images/minimise.jpg" width="116" height="23" style="display:none;" /> 
              </a> 
              </div>

JavaScript

//read more widget for CC@HWS
        $("#readMore").click(function(){
            
            var infoHeight = $("#contentSummary").height();
            $('.mycontrols').animate({width : '906px', top : (infoHeight + 650)+'px'}, 300);
            $('#readMore').hide();
            $('#minimize').show();
                                      
        });
        
            $("#minimize").click(function(){
            
            var infoHeight = $("#contentSummary").height();
        $('.mycontrols').animate({width : '390px', top : (infoHeight)+'px'}, 300);
            $('#readMore').show();
            $('#minimize').hide();
                                      
        });