javascript - I need to make a page where you can see the beginning of a review, but have to click on 'click more' to see the rest of the review

Question

I am putting up a web site for a business and they want a page dedicated to their good reviews of their products.

They however don't want huge paragraphs taking up their page. Is there a way to make it so that for each review there is something they can click on, such as just a line of it, then "click here", that would expand each one individually?

I hade a gentlemen help me a little while back, but it only worked for one entry. I used the same javascript for all 3 and I am thinking that was incorrect.

Also, I am assuming this will expand the height of the page based on how long the review was. I only mention this because I have a footer at the bottom.

Anyway, JavaScript I assume?

<div class="comment">
This is the first line of the comment 
<span id="extended_comment"   style="display:none;">and  this    is the rest of the    comment     that is hiddden.</span> <a href="#" id="toggle">click here for more</a></div>

<script type="text/javascript">
var toggle = document.getElementById('toggle');
toggle.onclick = function() {
var extended = document.getElementById('extended_commen…
if(this.innerHTML == 'click here for more') {
 extended.style.display = 'inline';
 this.innerHTML = 'click here for less';
 } else {
 extended.style.display = 'none';
this.innerHTML = 'click here for more';
}
};
</script>

Answer 1

将您的代码封装在一个函数中并将必要的 id 传递给该函数，以便设置每个元素的 onclick 属性。

function setExpandOnclick(toggleButton, extendedComment) {
  // your code here, using the arguments rather than hard-coded string ids
}

setExpandOnclick("toggle-button1", "expanded-comment1");
setExpandOnclick("toggle-button2", "expanded-comment2");

你走在正确的轨道上。