toggle

by oktaviardi pratama

HTML

<div class="cmsmasters_row_inner">
  <div class="cmsmasters_row_margin cmsmasters_11">
    <div class="cmsmasters_column one_first">
      <div class="cmsmasters_column_inner">
        
      <div class="toggle-component">
  <div id="toggle-disclaimer" class="content hide">
    lorem ipsum
  </div>
  <div>
  <div class="toggle-action" onclick="toggleDisclaimer()">
    open toggle
  </div>
</div>
</div>  
        
        
      </div>
    </div>
  </div>
</div>

SCSS

.toggle-component {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  bottom: 0;
  .content {
    background-color:#ccc;
    padding: 15px;
    text-align:left;
    height: 100px;
    opacity: 1;
      -webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
  }
  .content.hide {
    height: 0;
    opacity: 0;
  }
  .toggle-action {
    padding: 10px 15px;
    background:#eee;
    color:#000;
    text-align: left;
    cursor: pointer;
  }
  
}

JavaScript

function toggleDisclaimer() {
  var element = document.getElementById("toggle-disclaimer");
  element.classList.toggle("hide");
}