<div class="accordion">
  <div class="accordion-header">
    <h2>Hover Me!</h2>
  </div>
  <div class="accordion-body">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
    provident nihil placeat a ipsa voluptas dolores quo harum maxime aut
    itaque aliquam earum sed, ad, accusantium quas dignissimos asperiores
    odio! Quas voluptatem dolorem ratione harum fugiat, pariatur laudantium
    eligendi nostrum, veniam et, sed officia minus quasi! Inventore
    accusamus neque laudantium tenetur accusantium fuga ea optio
    reprehenderit sapiente quam. Quisquam, distinctio. Vel, at quo facilis
    nihil assumenda laboriosam eius earum aspernatur labore quasi veniam
    beatae sequi. Incidunt delectus magnam et quasi tempore soluta,
    perspiciatis distinctio quae, sed dolores in quas eveniet? Tempora
    delectus suscipit consequuntur esse sapiente pariatur voluptas dolor sit
    error consectetur illum quas iure, distinctio velit est maxime dicta
    fuga, itaque, sed praesentium? Animi dolorem laudantium sequi quam
    debitis? Quia dolorem perspiciatis a! Reiciendis quidem, repudiandae
    optio, sed illo ad distinctio minima et maiores velit cumque! Molestias
    libero expedita id saepe. Quos aliquam aperiam, unde architecto
    consequatur tenetur magnam. Possimus id molestias, facere fugit dolor
    fugiat aut ut, et, excepturi suscipit ad voluptate beatae at eligendi
    libero quis? Cumque sequi quasi delectus facilis ex vitae laboriosam
    expedita placeat error. In, molestiae eius omnis assumenda perferendis
    sunt suscipit excepturi? 
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}
body {
  display: grid;
  place-content: center;
}
.accordion {
  width: 300px;
  border-bottom: greenyellow solid 10px;
  background-color: #000;
  color: #fff;
}
.accordion-header {
  padding: 10px;
  cursor: pointer;
  font-size: 26px;
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.5s ease;
}
.accordion:hover .accordion-body {
  max-height: 300px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.