Edit in JSFiddle

JavaScript
HTML
CSS
Result

$(document).ready(function(){

var xontener = $('.tash-content');
var auto_hide_bottom_trigger = true ;
var peek_height = "250px";
var speed_by_height = false ;
var speed_by_height_ratio = 1 ;
var default_speed = 500 ;

$.fn.in_hiding = function() {
	$(this).parent().find(".tash-liner").fadeIn();
	$(this).parent().find(".tash-bottom").slideUp();
}
$.fn.in_showing = function() {
	$(this).parent().find(".tash-liner").fadeOut();
	$(this).parent().find(".tash-bottom").slideDown();
}
$.fn.in_peeking = function() {
	$(this).parent().find(".tash-liner").fadeOut();
	$(this).parent().find(".tash-bottom").slideDown();
}
$.fn.fa_up = function() {
	$(this).parent().find(".fa").removeClass().addClass("fa fa-arrow-circle-o-up");	
}
$.fn.fa_down = function() {
	$(this).parent().find(".fa").removeClass().addClass("fa fa-arrow-circle-o-down");	
}
/* start */
	xontener.each(function(){
		if ( auto_hide_bottom_trigger == false ) {
			$(".tash-bottom").removeClass("tash-bottom").addClass("tash-bottom-keep");
		}
		
		var tinggi_ori = $(this).css("height");
		$(this).attr("tinggi-ori" , tinggi_ori);
		
		if ( $(this).hasClass("content-peek") ) {
			$('<div class="peek-overlayer" style="position: absolute;top: 0;left: 0;background: url(http://www.toniagustian.com/img/tinydiagonalpattern.png), #9898981a;width: 100%;height: 100%;"></div>').prependTo(this);
			$(this).css("height" , peek_height );
			$(this).in_peeking();
			$(this).fa_down();
			$(this).addClass("tash-trigger");
		}
		else if ( $(this).hasClass("content-hide") ) {
			$(this).hide().in_hiding();
			$(this).fa_down();
		}
		else if ( $(this).hasClass("content-show") ) {
			$(this).show().in_showing();
			$(this).fa_up();
		}		
	});
	
/* action */
	$(document).on("click", ".tash-trigger", function(){

		var tashcontent = $(this).parent().find(".tash-content");
		var faa = $(this).children(".fa");
		var tinggi_ori_parsed = parseInt( tashcontent.attr("tinggi-ori") )
		
		if ( speed_by_height == true ) {
			var xxx = tinggi_ori_parsed * speed_by_height_ratio ;
		} else {
			var xxx = default_speed ;
		}
		var speednya = xxx ;
		
		if ( tashcontent.hasClass("content-peek") ) {
			tashcontent.children('.peek-overlayer').fadeOut();
			tashcontent.animate({height:tinggi_ori_parsed},speednya , function() {
				tashcontent.removeAttr("style").removeClass().addClass("tash-content content-show");
				$(this).fa_up();
			}).in_showing();
		}
		else if ( tashcontent.hasClass("content-show") ) {
			tashcontent.slideUp(speednya, function(){
				$(this).removeClass("content-show").addClass("content-hide");
				$(this).fa_down();
			}).in_hiding();
		}
		else if ( tashcontent.hasClass("content-hide") ) {
			tashcontent.slideDown(speednya, function(){
				$(this).removeClass("content-hide").addClass("content-show");
				$(this).fa_up();
			}).in_showing();
		}
	});
});

<div class="tash-wrap" style="position:relative;">
<div class="tash-trigger tash-title" title="click to show / hide" style="padding: 5px 0;color: #777;display: table;">
<i class="fa fa-arrow-circle-o-down"></i>
<div class="tash-title-text">

tash-content content-show

</div>
</div><!--tash-trigger-->
<div class="tash-content content-show">
tash-content content-show
isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show 

</div><!--tash-content-->
<div class="tash-liner" style="border-top: 1px groove white;margin-bottom: -1px;display:none;"></div>
<div class="tash-trigger tash-bottom">show/hide</div>
</div><!--tash-wrap-->



<div class="tash-wrap" style="position:relative;">
<div class="tash-trigger tash-title" title="click to show / hide" style="padding: 5px 0;color: #777;display: table;">
<i class="fa fa-arrow-circle-o-down"></i>
<div class="tash-title-text" style="display: inline-block;">

tash-content content-peek

</div>
</div><!--tash-trigger-->
<div class="tash-content content-peek">
tash-content content-peek
isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show 

</div><!--tash-content-->
<div class="tash-liner" style="border-top: 1px groove white;margin-bottom: -1px;display:none;"></div>
<div class="tash-trigger tash-bottom">show/hide</div>
</div><!--tash-wrap-->


<div class="tash-wrap" style="position:relative;">
<div class="tash-trigger tash-title" title="click to show / hide" style="padding: 5px 0;color: #777;display: table;">
<i class="fa fa-arrow-circle-o-down"></i>
<div class="tash-title-text" style="display: inline-block;">

tash-content content-hide

</div>
</div><!--tash-trigger-->
<div class="tash-content content-hide">
tash-content-hide
isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show isinya content-show 

</div><!--tash-content-->
<div class="tash-liner" style="border-top: 1px groove white;margin-bottom: -1px;display:none;"></div>
<div class="tash-trigger tash-bottom">show/hide</div>
</div><!--tash-wrap-->

.tash-wrap {
    margin: 10px 0;
    position:relative;
}
.tash-trigger {
    cursor: pointer;
}
.tash-title {
    display: inline-block;
    padding: 12px 0 0;
    height: 50px;
}
.tash-title-text {
    font-size: 32px;
    line-height: 43px;
	display: inline-block;
}
.tash-trigger {
	cursor: url(http://www.toniagustian.com/img/sh-cur-3d.png), pointer;
}
.tash-trigger .fa {
    font-size: 15px;
    color: #cecece;
    display: inline-block;
    vertical-align: top;
    margin: 18px 9px 0px 0;
}
.tash-content {
	border: 2px groove white;
	padding: 25px;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}
.tash-liner {
   border-top: 1px groove white;
   margin-bottom: -1px;
   display:none;
}
.tash-bottom,
.tash-bottom-keep {
    font-size: 10px;
    margin: 5px 0;
	display: table;
}