JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<ul id="container"> 
    <li id="link1" class="box clickable">
        <a href="#">LINK ONE</a>
    </li>
    <li id="link2" class="box clickable">
        <a href="#">LINK TWO</a>
    </li>
    <li id="link3" class="box clickable">
        <a href="#">LINK THREE</a>
    </li>
</ul>

<div id="content_display">
    <button>CLOSE</button>
    <p id="link1_content">THIS IS THE CONTENT FOR THE FIRST LINK.</p>
    <p id="link2_content">THIS ONE IS FOR THE SECOND LINK</p>
    <p id="link3_content">AND THIS IS THE THIRD LINK</p>
</div>

CSS

div.box {
    width: 50px;
    height: 50px;
    background: yellow;
    margin: 10px;
}

div.clickable {
    background: orange;
}

#content_display {
    width: 200px;
    height: 200px;
    background: yellow;
}
#content_display > p {
    margin: 10px;
    color: blue;
}

JavaScript

var clickables = $('.clickable');
var display = $('#content_display');

display.find('p').hide();

// remember the one that was clicked
var $content; 

$('#container').delegate( '.clickable', 'click', function() {
    
    display_animation_enabled = true;
    clickables.removeClass('clickable');
    
    if( $content ) {
        $content.hide();
    }
    $content = $('#' + this.id + '_content').show();
    
    
    cycle();
    
});

var display_animation_enabled = false;

display.find('button').click(function() {
    display_animation_enabled = false;
    clickables.addClass( 'clickable' );
    if( $content ) {
        $content.hide();
    }
});

function cycle() {
    if( display_animation_enabled ) {
        display.animate({width:300,height:300})
               .animate({width:200,height:200}, cycle);
    }
}