How do I make read more buttons like Quora using jQuery?

Answer 1

There are different ways to to create that functionality. A popular one is to use a combination of javascript (or jQuery) and CSS such as below:

// markup

<div class="excerpt">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus quo recusandae voluptatum molestiae laborum ut nostrum asperiores... <span class="read-more-link">(more)</span></p>

</div>

<div class="read-more hide">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus quo recusandae voluptatum molestiae laborum ut nostrum asperiores, fugit eligendi quae, quas sed repellendus consectetur quos est, blanditiis sunt, necessitatibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus quo recusandae voluptatum molestiae laborum ut nostrum asperiores, fugit eligendi quae, quas sed repellendus consectetur quos est, blanditiis sunt, necessitatibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit possimus quo recusandae voluptatum molestiae laborum ut nostrum asperiores, fugit eligendi quae, quas sed repellendus consectetur quos est, blanditiis sunt, necessitatibus!</p>

</div>

// css

.read-more-link {

color: #2b6dad;

cursor: pointer;

}

.read-more-link:hover {

text-decoration: underline;

}

.hide {

display: none;

}

// jquery

$('.read-more-link').on('click', e => $('.read-more').removeClass('hide'));