<button id="toggle-button" onclick="slideToggle(document.querySelector('.collapsible'))">Toggle collapse</button>

<div class="container">
  <div class="section open">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="section collapsible open">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="section open">
   <p>Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

// This stuff matters!
.container {
  
  .section {
    overflow:hidden;
    transition:height .3s ease-out;
    height:0;
    
    &.open {
      height: auto;
    }
  }
}


// This stuff doesn't matter!
* {
  box-sizing:border-box;
}
body {
  margin:0;
  padding:10vh 10vw;
  font-family:arial;
}
p {
  margin:11px;
}
.container {
  border: 3px solid #FFEB3B;
  margin:0 auto;
  max-width:300px;
  border-radius:3px;
  
  .section {
    border:3px solid #4CAF50;
  }
}
button {
  display:block;
  --webkit-appearance:none;
  font-size:18px;
  border:none;
  border-radius:3px;
  background:#2196F3;
  color:white;
  margin:15px auto;
  padding:15px;
  cursor:pointer;
  
  transition:box-shadow 0.2s ease-out;
  
  &:hover {
    box-shadow:0px 0px 15px lightgrey;
  }
  &:active {
    box-shadow:0px 0px 10px lightgrey;
  }
  &:focus {
    outline:none;
  }
}
View Compiled
function slideToggle(el) {
    // The following 2 lines are ONLY needed if you ever want to start in a 'open' state. Due to the way browsers
    // work it needs a double of this (or something like console.log(el.scrollHeight);) to prevent the render skipping
    el.style.height = el.scrollHeight + 'px';
    el.scrollHeight = el.scrollHeight; // Something like console.log(el.scrollHeight); also works, just something to prevent render skipping

    el.classList.toggle('open');
    el.style.height = el.classList.contains('open') ? el.scrollHeight + 'px' : 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js