Show more/show less button

This feature allows you to compress and expand content. It provides easy access to more content without taking up space on the webpage. This also gives the user the freedom to skip the content if it’s not relevant to them.

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia velit lorem, nec venenatis augue cursus quis. Quisque convallis maximus hendrerit.

In eget est vestibulum, pulvinar leo non, varius nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dictum vitae lorem sed pretium. Cras finibus lacinia enim eget mollis.

Nulla facilisi. Fusce ac luctus lectus. Donec eget arcu dolor. Cras commodo, mi ac fringilla aliquet, odio nulla faucibus felis, mollis varius velit enim id massa. Nullam id nunc eget ligula commodo feugiat. Praesent commodo ac sem auctor rhoncus. In ut pellentesque sem, et rhoncus nisl.

Integer vitae purus lorem. Curabitur in efficitur felis. Praesent ornare sollicitudin nunc a lobortis. Pellentesque sit amet faucibus eros, vel rhoncus odio. In nec molestie elit, quis porttitor quam. Nam pharetra, purus a suscipit vulputate, nibh ante aliquet lectus, sed ornare magna magna eu massa. Fusce posuere vel neque et pretium.

Code


{{Content displayed goes here }}

<div id="more-less-hidden-content" style="display: block;">
	{{Content hidden goes here }}
</div>

<button id="toggle-caption" type="button" class="cui btn-md secondary-text">Show more<span class="cicon-chevron-down right"></span></button>