"Add Read More Blocks (no javascript)"
Bootstrap 3.0.0 Snippet by Lybb0196

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <article> <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil cum.</p> <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox"> <div class="read-more-content"> <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies.sequuntur massa fugit deserunt laboriosam mi consectetur curabitur cum.</p> </div> <label class="read-more-toggle-label" for="read-more-toggle-1">Read </label> </article> <article> <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitatione quuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultricesfermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</p> <input id="read-more-toggle-2" class="read-more-toggle" type="checkbox"> <div class="read-more-content"> <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</p> </div> <label class="read-more-toggle-label" for="read-more-toggle-2">Read </label> </article>
.read-more-content { max-height: 0; overflow: hidden; transition: max-height .5s ease; } .read-more-toggle { display: none; } .read-more-toggle-label { display: inline-block; user-select: none; cursor: pointer; border: none; padding: 5px; margin: .5em; font-size: .8em; background: #555; color: white; } .read-more-toggle-label:after { content: "More"; display: inline-block; } .read-more-toggle:checked + .read-more-content { display: block; /* css animation won't work with "auto"; set to some height larger than the content */ max-height: 1000px; } .read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after { content: "Less"; } article { border-bottom: 1px solid black; } article p { margin-bottom: .5em; }

Related: See More


Questions / Comments: