Edit in JSFiddle

$(document).ready(function(){

/* demo only */
  $(".hs-top-trigger").text("The Title");
  $(".hs-content, .hs-content-peek, .hs-content-show").text("ini isinya ini isinya ini isinya ini isinya ini isinya ini isinya ini isinya ini isinya ini isinya ini isinya").append('<div class="hs-trigger">trigger INSIDE content</div>');
  $(".hs-bottom-trigger").text("bottom trigger");
alert("document is ready");
  $(".hs-trigger").click(function(){
    $(this).toggleClass("orange");
  });

/* demo only done */

  var peeking_height = "30px";

  $(".hs-content").hide();
  $(".hs-content-show").show().removeClass().addClass("hs-content");
  $(".hs-content-peek").each(function(){
    var peek_h = $(this).height();
    $(this).attr("pk-ht", peek_h).height(peeking_height).addClass("hs-trigger");

  });

  $(document).on("click", ".hs-trigger" , function(){
    var paren = $(this).parents(".hs-main-wrap");
    if ( paren.find(".hs-content-peek").length == 0 ){
      paren.find(".hs-content").slideToggle();
    } else {
      var full_height = paren.find(".hs-content-peek").attr("pk-ht");
      paren.find(".hs-content-peek").animate({ height: full_height}, function() {
        paren.find(".hs-content-peek").removeClass().addClass("hs-content");
      });
    }
  });
});

<h1>hideshow001 by toni a, 2018-09-06</h1>
<div class="temp-content-wrap">

<div class="hs-main-wrap">
  <button class="hs-trigger hs-top-trigger">
  </button>
  <div class="hs-content-wrap">
    <div class="hs-liner"></div>
    <div class="hs-content"></div>
    <div class="hs-trigger">trigger under content</div>
  </div>
  <button class="hs-trigger hs-bottom-trigger"></button>
</div>

<div class="hs-main-wrap">
  <button class="hs-trigger hs-top-trigger">
  </button>
  <div class="hs-content-wrap">
    <div class="hs-liner"></div>
    <div class="hs-content-peek">
	</div>
  </div>
  <button class="hs-trigger hs-bottom-trigger"></button>
</div>

<div class="hs-main-wrap">
  <button class="hs-trigger hs-top-trigger">
  </button>
  <div class="hs-content-wrap">
    <div class="hs-liner"></div>
    <div class="hs-content-show"></div>
    <button class="hs-trigger">trigger under content</button>
  </div>
  <button class="hs-trigger hs-bottom-trigger"></button>
</div>

</div>

body {
  background: #999;
}
button {
  background: yellow;
}
.orange {
  background: orange;
  color: white;
}
.hs-main-wrap {
  padding: 20px;
  margin-bottom: 30px;
  background: white;
}
.temp-content-wrap {
  width: 300px;
}
.hs-content, .hs-content-peek {
  overflow: hidden;
}
.hs-liner {
  border-top: 1px solid black;
}
.hs-top-trigger {
  font-weight: bold;
}
.hs-trigger {
	cursor: zoom-in;
}
.hs-content .hs-trigger {
    display: table;
    color: red;
}