How to add a transition to a Read more code

I am pretty new to CSS & javascript. For the last 3 hours I’ve been trying to add a transition to this code. It is a ‘Read more’ function.

I hope that not only someone can finally help me with adding the transition to it, but I could learn something about CSS and javascript 🙂

    function readMore(nr) {
    let dots = document.querySelector(`.card[data-nr="${nr}"] .dots`);
    let moreText = document.querySelector(`.card[data-nr="${nr}"] .more`); 
    let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);
    

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read more";
    moreText.style.display = "inline";
  }
}

JavaScript
​x
 
    function readMore(nr) {
    let dots = document.querySelector(`.card[data-nr="${nr}"] .dots`);
    let moreText = document.querySelector(`.card[data-nr="${nr}"] .more`); 
    let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);
    
​
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read more";
    moreText.style.display = "inline";
  }
}

.myBtn {
    background-color: transparent!important;
    color: #000000;
    border: none;
    font-family: Arial;
    cursor: pointer;
    font-size: 30px;
    text-align: center;
}

JavaScript
 
.myBtn {
    background-color: transparent!important;
    color: #000000;
    border: none;
    font-family: Arial;
    cursor: pointer;
    font-size: 30px;
    text-align: center;
}

<html>
<body>

<div class="card" data-nr="1">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <span class="dots">...</span><span class="more" style="display: none;"> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat./span></p>

<button onclick="readMore('1')" class="myBtn">Read more</button>

</div>

</html>
</body>

JavaScript
 
<html>
<body>
​
<div class="card" data-nr="1">
​
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <span class="dots">...</span><span class="more" style="display: none;"> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat./span></p>
​
<button onclick="readMore('1')" class="myBtn">Read more</button>
​
</div>
​
</html>
</body>

I tried adding .card { transition: max-height 0.7s;} to the CSS.

Answer

There’s a lot of not “great” or simple options for this. If you use a library/framework like jquery or bootstrap they offer utilities to manage sliding size transitions for you.

This is because to do it right you need to use js to figure out and adjust the height values.

A less robust way is to do so with max-height and a transition on it. The trick is you cannot transition from something like display:none; or visibility:hidden;

function readMore(nr) {
  let p = document.querySelector(`.card[data-nr="${nr}"] p`);
  let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);


  if (!p.classList.contains('collapse')) {
    p.classList.add('collapse');
    btnText.innerHTML = "Read more";
  } else {
    p.classList.remove('collapse');
    btnText.innerHTML = "Read more";
  }
}

JavaScript
 
function readMore(nr) {
  let p = document.querySelector(`.card[data-nr="${nr}"] p`);
  let btnText = document.querySelector(`.card[data-nr="${nr}"] .myBtn`);
​
​
  if (!p.classList.contains('collapse')) {
    p.classList.add('collapse');
    btnText.innerHTML = "Read more";
  } else {
    p.classList.remove('collapse');
    btnText.innerHTML = "Read more";
  }
}

.myBtn {
  background-color: transparent!important;
  color: #000000;
  border: none;
  font-family: Arial;
  cursor: pointer;
  font-size: 30px;
  text-align: center;
}

p {
  overflow: hidden;
  transition: max-height 0.7s;
  max-height: 100px;
}

p.collapse {
  max-height: 30px;
}

JavaScript
 
.myBtn {
  background-color: transparent!important;
  color: #000000;
  border: none;
  font-family: Arial;
  cursor: pointer;
  font-size: 30px;
  text-align: center;
}
​
p {
  overflow: hidden;
  transition: max-height 0.7s;
  max-height: 100px;
}
​
p.collapse {
  max-height: 30px;
}

<html>

<body>

  <div class="card" style="margin-top: 50px;" data-nr="1">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <button onclick="readMore('1')" class="myBtn">Read more</button>

  </div>

</html>
</body>

JavaScript
 
<html>
​
<body>
​
  <div class="card" style="margin-top: 50px;" data-nr="1">
​
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
​
    <button onclick="readMore('1')" class="myBtn">Read more</button>
​
  </div>
​
</html>
</body>

Advertisement

Answer