<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>CSS Read more</h2> <br/> <article> <input type="checkbox" id="read_more" role="button"> <label for="read_more" onclick=""><span>Read More</span><span>Hide This Shit!</span></label> <section> <p>Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.</p> </section> <section> <p>Bootstrap 4 is completely free to download and use!</p> </section> </article> </div>

/* css only show/hide*/ .container{ padding: 5%; } article { margin-bottom: 3rem; position: relative; } article:before, article:after { content: ""; display: table; } article:after { clear: both } article section:first-of-type { float: right; width: 100%; } article section:last-of-type { display: none; visibility: hidden; } input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } [for="read_more"] { position: absolute; bottom: -3rem; left: 0; width: 100%; text-align: center; padding: .65rem; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); } [for="read_more"]:hover { background: rgba(0,0,0,.5); color: rgb(255,255,255); } [for="read_more"] span:last-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ section { display: block; visibility: visible; width: 100%; } input[type=checkbox]:checked ~ figure { width: 100% } input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type { display: block; visibility: visible; }