JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<div id="container">
      <div id="view">
        <div class="user-timeline" ></div>
        <div class="send-tweet">
          <input type="text" id="message" />
          <input type="button" value="SEND" id="send" />
        </div>
        <div id = "div-history">
            <ul id='history'><li>1</li><li>1</li><li>1</li></ul>
        </div>
      </div>
    </div>

CSS

/*
	REFERENCE:
	    <div id="container">
	      <div class ="user-timeline" hidden></div>
	      <div class="send-tweet">
	        <input type="text" id="message" />
	        <input type="button" value="SEND" id="send" />
	      </div>
	      <div id = "div_history">
	        <ul id='history'></ul>
	      </div>
	    </div>

*/

body {
	font-family:  Arial, Helvetica, sans-serif;
	overflow: auto;
}
div {
	width:650px;
	height:270px;
}
li {
	list-style: none;
	width: 97%;
	margin-bottom:3px;
	margin-left:5px;
	border: 1px solid;
	border-radius: 5px;
	background-color: #c0deed;
	box-shadow: 3px 3px 2px #888888;
	padding-left: 5px;
	padding-bottom: 1px;
}

#container {
	position:static;
	height:290px;
	width:675px;
	box-shadow: 2px 1px 2px #888888;
	margin-left:25%;
	margin-right:25%;
	border-left: 2px solid;
	border-right: 2px solid;
	border-radius: 15px;
	background-color: #0084b4;
}
#view {
	position:static;
	padding:0;
	margin-left:12px;
	margin-top:1px;
	height:80%;

}

.user-timeline {
	position:relative;
	height:260px;
	box-shadow: 2px 1px 2px #888888;
	border-left: 1px solid;
	border-right: 1px solid;
	top:10px;
	border-radius:15px;
	background-color: #ffffff;
}
.send-tweet {
	position:relative;
	top:-3px;
	left:10px;
	height:20px;
	padding:0;
}

#message {
	position:relative;
	width:522px;
	margin-top:0;
	margin-left:0;
	border-radius: 5px;
}

#send {
	position:relative;
	border-radius: 5px;
	width:100px;
	margin-right:0;
	background-color: #00aced;
}

#div-history {
	position:relative;
	box-shadow: 2px 1px 2px #888888;
	border-left: 1px solid;
	border-right: 1px solid;
	border-radius: 15px;
	background-color: #ffffff;
}

#history {
	margin:0px;
	padding:5px 0 0 0;
}

JavaScript

init_animations();

function init_animations(){
    var panels = ['#div-history', '.user-timeline', '.send-tweet', '#view', 270, 260];
    
    $(panels.slice(0,3).join(', ')).on('click', function(event){
        if($(this).attr('class') == $(panels[2]).attr('class')){
            if($(panels[0]).height() < panels[4]){
                $('body').click();
                $(panels[0]).click();
            }
            event.stopImmediatePropagation();
            return;
        }
        var other = panels[0];
        if($(this).attr('id') === $(other).attr('id')){
            other = panels[1];   
        }
        
        var _this_height = $(this).attr('height');
        var _other_height = $(other).attr('height');
        $(other).animate({height:"0"},
                                   { duration:300, 
                                     complete: function(){
                                         $(this).hide();
                                     }
                                   });
        $(this).animate({height:"540"},300);
        event.stopImmediatePropagation();
    });
    
    $('body').on('click', function(event){
        var target = $(event.target).parent();
        var parent = panels[3];
        if($(target).attr('id') !== $(parent).attr('id')){
            if($(panels[0]).height() > panels[4] ) {
                $(panels[1]).show();            
            }
            else{
                $(panels[0]).show()            
            }
            $(panels[0]).animate({height:panels[4]});
            $(panels[1]).animate({height:panels[5]});
        }
    })
}