<body>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam nibh quis sapien placerat ullamcorper. Ut vitae risus quis tortor posuere convallis hendrerit non augue. Quisque auctor luctus volutpat. Donec vulputate,<span class="dots">...</span><span class="more-text"> ligula ac ornare varius, sapien ligula lobortis diam, quis aliquet elit nisl at est. Fusce facilisis metus vitae posuere tempus. Quisque sodales mi in diam tincidunt, quis lobortis diam cursus. Aenean sed tellus lacus. Vivamus ut fermentum mauris, eget rutrum nisl. Fusce consectetur urna eget dui porttitor, ultrices ultrices odio pellentesque. Nunc dapibus rhoncus interdum. Morbi hendrerit id nisi eget facilisis. Nam maximus mauris a erat dapibus, in vehicula risus blandit. Vivamus id laoreet ipsum. Aliquam lobortis turpis sed felis placerat, sed tempor nisi lacinia. Fusce lacinia laoreet bibendum. Cras nisl nulla, fringilla viverra massa nec, malesuada sodales diam. Mauris vitae risus at tortor tempor luctus eu sed lectus. Vestibulum non aliquam augue, non varius neque.</span>
</p>
<button class="more-text-btn">Show More</button>
</body>
<footer>
<sub>by: SALAH SBAI</sub>
</footer>
body{
text-align: justify;
max-width: 700px;
margin: 70px auto;
background: #222;
color: white;
align-items: center;
font-family: monospace;
}
.text{
font-size: 20px;
}
.more-text{
display: none;
}
.more-text-btn{
padding: 10px 30px;
font-size: 18px;
border-radius: 15px;
border: 1px dashed white;
outline: none;
cursor: pointer;
background-color: #444;
color: aliceblue;
}
/* toggle the class="show-more" in JS
So when it's active the dots will disappear.
*/
.text.show-more .dots {
display: none;
}
.text.show-more .more-text {
display: inline;
}
footer sub{
position: absolute;
width: max-content;
height: 20px;
margin: 10px;
top: 95%;
left: 1%;
}
const readMoreBtn = document.querySelector('.more-text-btn');
const text = document.querySelector('.text');
readMoreBtn.addEventListener('click', ()=>{
text.classList.toggle('show-more');
if(readMoreBtn.innerText === 'Show More'){
readMoreBtn.innerText = 'Show Less';
readMoreBtn.style.background = 'crimson';
} else{
readMoreBtn.innerText = 'Show More';
readMoreBtn.style.background = '#555';
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.