JSFiddle - React, Tailwind, and code Playground

by grn2012

HTML

To reproduce, click to load the "news," click the bottom link, then click to load the "news "again.

<div id="loaded">
    <div id="news">
        <div class="inner">
            <a class="more" href="#">Load Some News in Here</a>
        </div>
    </div>
</div>

<div id="links">
    <br /><a id="reload" href="#">Reload #news into #loaded</a>
</div>

CSS

#links {
    margin-top: 20px;
}

#loaded {
    border: 1px solid gray;
    height: 100px;
    margin: 5px;
    overflow: hidden;
    padding: 10px;
    width: 300px;
}

JavaScript

var $Body = $("#news .inner");
var $Title = $("#news .title");

var strNewsURL = "";
var strOld = $Body.html();

$("a#reload").click( function(e) {
    
    $("#loaded").html(strOld);
    
    e.preventDefault();
    
} );

$("#news a.more").live("click", function(event) {
    
    console.log("click fired for anchor of class more.  new value for #news should be loaded ALWAYS!");
    
    $Body.slideUp(100, function() {
        
        $(this).html("something else");
        
    } ).slideDown();
    
    event.preventDefault();
    
} );