<section class="demo-section">
<div class="demo-container-outer">
<div class="demo-container-inner">
<div class="demo-content">
<span>A bear walks into a bar and says,
"Give me a whiskey… and a cola.
"Why the big pause?" asks the bartender."</span>
<span class="content-read-more">The bear shrugged. "I'm not sure.
I was born with them."</span>
</div>
</div>
<div class="button-container">
<button id="toggleButton" class="btn btn-sm btn-secondary float-end toggle-button">Read more</button>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.demo-section {
margin: 0 auto;
max-width: 450px;
padding-top: 4em;
}
.demo-container-outer {
padding: 3em;
}
.demo-container-inner {
border-top: 1px solid rgba(171, 172, 162, 0.2);
border-bottom: 1px solid rgba(171, 172, 162, 0.2);
}
.demo-content {
padding: 1em 0;
word-wrap: break-word;
font-family: 'Poppins', sans-serif;
font-size: 1.4em;
line-height: 1.2em;
}
.toggle-button {
width: 140px;
}
.content-read-more {
display: none;
}
.button-container {
margin-top: 40px;
padding-bottom: 20px;
}
$('#toggleButton').click(function() {
$('.content-read-more').toggle();
if ($('#toggleButton').text() == "Read less") {
$('#toggleButton').text("Read more")
} else {
$('#toggleButton').text("Read less")
}
});