How to add several Read More and Read Less buttons through Javascript using getElementsById or ClassName?

问题

everyone. Recently, I have been working to add 'Read More' and 'Read Less' buttons through Javascript. I am able to do that only once for one specific element by picking its ID. But, I want that to happen several times for several other similar elements. I tried storing the IDs or Classnames in a variable and then looping through it but it's not working. Can you please have a look at the Javascript code and suggest how can I achieve the same functionality for several other elements. Here's the code for one element that's working fine. I want this for several paragraphs. This is the HTML.

  <p style="font-size:1.1em; margin-top:25px; margin-bottom:15px;">This is Lorem Ipsum. This is Lorem Ipsum. <span id="dots">...</span> <span style="display:none;" id="more"> This is the hidden text. This is the hidden text. </span> 
 </p>
 <a id="myBtn" style="cursor:pointer; margin-bottom:1em; font-weight:bold;" onclick="myFunction()">Show More</a>

This is the Javascript.

 function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("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 Less"; 
    moreText.style.display = "inline";
  }
}

Now, in this, myFunction() is called when the Read More or Read Less buttons are clicked. The text with ID 'more' is hidden and dots represent some dots at the end of visible content.

Now I want this to happen for multiple paragraphs with the same IDs or Classnames. I tried using loops to achieve that but getting the error "uncaught error myFunction is not defined". I believe I did not set the looping process correctly.

Would appreciate if someone could help me find a workable solution to this issue. Thank you in advance to everyone.

回答1:

You can toggle a class to show/hide the spans, using some CSS, like this:

document.querySelectorAll(".showmore").forEach(function (p) {
  p.querySelector("a").addEventListener("click", function () {
    p.classList.toggle("show");
    this.textContent = p.classList.contains("show") ? "Show Less" : "Show More";
  });
});

.showmore {
  font-size: 1.1em;
  margin-top: 1.5em;
}

.showmore .more, .showmore.show .dots {
  display: none
}

.showmore.show .more {
  display: inline
}

.showmore a {
  cursor: pointer;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-weight: bold;
}

<p class="showmore">This is Lorem Ipsum. This is Lorem Ipsum. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

<p class="showmore">And here is a second paragraph. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

The code first loops over all paragraphs, then grabs the <a> inside and assigns the click handler.

来源：https://stackoverflow.com/questions/53831318/how-to-add-several-read-more-and-read-less-buttons-through-javascript-using-gete

标签

javascript

jquery

for-loop