Read More Button
Home
Snippets
Read More Button
HTML
CSS
JS
<div class="content"> <p> This is some introductory text that is always visible. <span class="more-text"> This is the additional text. </span> </p> <span class="read-more-btn" onclick="toggleReadMore()">Read More</span> </div>
body { font-family: Arial, sans-serif; height: 100vh; margin: 0; background-color: #363636; display: grid; place-items: center; } .content { background: #222222; color: #ffd500; width: 280px; margin: auto; padding: 20px; border-radius: 8px; box-shadow: 0 0 15px #ffd500b4; } .more-text { display: none; } .read-more-btn { color: #64f321; cursor: pointer; }
function toggleReadMore() { var moreText = document.querySelector('.more-text'); var btnText = document.querySelector('.read-more-btn'); if (moreText.style.display === 'none') { moreText.style.display = 'inline'; btnText.textContent = 'Read Less'; } else { moreText.style.display = 'none'; btnText.textContent = 'Read More'; } } document.addEventListener('DOMContentLoaded', (event) => { document.querySelector('.more-text').style.display = 'none'; });
Ad #1
Ad #2
Scroll to Top