how to expand and collapse text in JavaScript

on
Here is the code to how to expand and collapse text in JavaScript by clicking the show more button.
 
how to expand and collapse text in JavaScript


 


HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim suscipit
      aperiam autem quos
      <span id="dots">...</span> <span id="more">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente libero minima ut eaque itaque quam quas possimus doloremque, voluptatum optio omnis accusamus placeat in consequatur expedita at nulla impedit accusantium?
      </span>
    </p>
<button id="btn">See More</button>
    <script src="app.js"></script>
  </body>
</html>
CSS 
#more{
  display: none;
}
button{
  cursor: pointer;
}
JAVASCRIPT 
let more = document.getElementById('more')
let dots = document.getElementById('dots')
let btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
  if (dots.style.display === 'none') {
    dots.style.display  = 'inline';
    more.style.display = 'none'
    btn.innerHTML = 'See More'
   }
   else{
          dots.style.display = 'none'
          more.style.display = 'inline'
          btn.innerHTML = 'See Less'
   }
})

Comments

Post a Comment

Have a Question? Comment Below