<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
  <p> <a target="_blank" href="https://codepen.io/thinsoldier/pen/QOobYX"><button>Click Here To See The Vanilla JS Version</button></a> </p>
  
  <ul class="accordion">
    <li class="accordion-section">
      <header class="accordion-header js-accordion-control">First Button</header>
      <div class="js-accordion-content is-hidden">
        <div class="accordion-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sapiente enim aspernatur ipsa quibusdam molestias fuga consectetur omnis assumenda adipisci ad earum architecto doloremque dolor natus. Enim mollitia a voluptatum.</p>
          <p class="test"> test div of fixed size </p>
          <p>The last words.</p>
        </div>
      </div>
    </li>
    <li class="accordion-section">
      <header class="accordion-header js-accordion-control">First Button</header>
      <div class="js-accordion-content is-hidden">
        <div class="accordion-text">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, perspiciatis inventore neque earum, accusamus ex suscipit fuga et consectetur facilis perferendis! Eum doloremque optio temporibus ad quis autem rerum modi?
          </p>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, perspiciatis inventore neque earum, accusamus ex suscipit fuga et consectetur facilis perferendis! Eum doloremque optio temporibus ad quis autem rerum modi?
          </p>
      </div>
    </li>
  </ul>
</body>
</html>
button { font-size: 1em; margin: 1em; }

p { margin: 0 0 1em 0; }

.test{
  background: red;
  height: 200px;
  width: 100px;
}

.accordion {
  background-color: #666;
  list-style-type: none;
  margin:0;
  padding:0;
  border-radius: 15px;
  padding: 1em;
}

.accordion-section {
  padding-bottom: 1em;
}

.accordion-section:last-child {
  padding-bottom: 0em;
}

.accordion-header {
  background: #a3a3a3;
  border-radius: 5px;
  padding: 10px;
}

.js-accordion-content {
    transition: 1s;
    overflow: hidden;
}
.is-hidden {
  max-height: 0;
  min-height: 0;
}
.is-visible {
  /*
  use the css variable --expanded if it is 
  set in the style attribute of the html
  otherwise use the fallback number.
  */
  max-height: var(--expanded, 70px);
  min-height: var(--expanded, 70px);
}

.accordion-text {
  color: #fff;
  padding: 1em 1em 0 1em;
}


// Measure all content elements and assign their height to a css variable in the style attribute of the html.
function measureAccordionContents( index, element ) {
  var contentHeight = $(element).find('.accordion-text').outerHeight();
  console.log(contentHeight);
  element.style.setProperty('--expanded' , contentHeight + 'px');
}
$('.js-accordion-content').each( measureAccordionContents );


function accordionEventHandler( clickEvent )
{
  clickEvent.preventDefault();
  var clickedItem = clickEvent.target;
  var text = $(clickedItem).parent().find('.js-accordion-content');
  text.toggleClass( 'is-visible').toggleClass( 'is-hidden' );
}
$(".js-accordion-control").click( accordionEventHandler );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.