Read More Slide Out Effect

content.html

<div class="archive-lead-content">
<p>Kenya has incredible wildlife and unparalleled natural splendour. Out in the vast expanse of its savannahs are some world-famous locations. Among these are Amboseli national park, Hell’s Gate and Lake Naivasha. The last two locations are both in the Great Rift Valley, the cradle of mankind.</p>
<p>This country is responsible for a lot of the ideas in popular culture about Africa. Here, we photographed the classic image of the African savannah – elephant herds roaming through vast grassland. Kenya is truly a spectacular place, an unparalleled destination to experience nature in the raw.</p>
</div>
<button class="my-button">Read More</button>

script.js

const $button = $('.my-button');
const $lead = $('.archive-lead-content');

$button.click(() => {
	$lead.toggleClass('long');
})

style.css

.archive-lead-content {
  overflow-y: hidden;
  max-height: 50px;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: linear;
  height: 200px;
}

.archive-lead-content.long {
  max-height: 500px;
}