Multiple boxes with Read more / Read less function - HELP

JavaScript
#1

Hello,
My Goal:

My%20Goal
My%20Goal1488×734 8.26 KB

I want multiple boxes with Read more / Read less function. I am able to create one working box but when adding more it doesn’t work. I am not the experienced.

What i have:
https://codepen.io/flo44781/pen/agZWwo -> One working Box with Read more / Read less

When i add new boxes do i need to to re write the Java Script for every new box i do?

Best regards,
Florian

#2

Can i say the script that it only affect box-1 another script should only affect box-2 …

#3

If you change all of the ids to classes, then you could use something like below:

function myFunction(e) {
  e = e || window.event;
  var buttonClicked = e.target || e.srcElement;
  var cardTextElem = target.parentNode.querySelector(".card-text");
  var dots = cardTextElem.querySelector(".dots");
  var moreText = cardTextElem.querySelector(".more");

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

I personally not do it this way. I would have it so that you can just write the full text in the p element with class=“card-text” and then dynamically shorten the text and add the 3 dots and then when the Read more button is clicked it would just display all the text and when the Read less button is clicked, the shortened version would be created again. This will involve some more logic, but in the end you would not have to write two versions for each section (short and full versions).

#4