Hello, 

I have added a section to my website show more/less.

This is the code that I have used:

HEAD

CSS

<style>
/* Initially, hide the extra text that
can be revealed with the button */
#moreText {

/* Display nothing for the element */
display: none;

}

</style>

BODY

JAVA

<script>

function toggleText() {

// Get all the elements from the page

var points =

document.getElementById("points");

var showMoreText =

document.getElementById("moreText");

var buttonText =

document.getElementById("textButton");

// If the display property of the dots

// to be displayed is already set to

// 'none' (that is hidden) then this

// section of code triggers

if (points.style.display === "none") {

// Hide the text between the span

// elements

showMoreText.style.display = "none";

// Show the dots after the text

points.style.display = "inline";

// Change the text on button to

// 'Show More'

buttonText.innerHTML = "Show More";

}

// If the hidden portion is revealed,

// we will change it back to be hidden

else {

// Show the text between the

// span elements

showMoreText.style.display = "inline";

// Hide the dots after the text

points.style.display = "none";

// Change the text on button

// to 'Show Less'

buttonText.innerHTML = "Show Less";

}

}

</script>

And the BODY/HTML part

<h1 style="color: black;">

</h1>

<h3>Title </h3>
<pre> </pre>
<p>
<p style="font-size:90%;"<p style="font-family:Roboto;"> Lorem ipsum tecrtgh gu ooioad udfuennen fvjjfuunela lloorteuynbe </p>
<span id="points">...</span>

<!-- Define the text that would be
hidden by default and only shown
when clicked on the button -->
<span id="moreText"<p style="font-size:90%;"<p style="font-family:Roboto;"> Lorem ipsun goadghteh ghhyei lor oouurerh nahhennkke 
<pre> </pre>
Lorem ipsonem mutuilor lplaot adashjhn anad jgsdfgue lkaloekke 
<pre> </pre>
text lorempuaionsad aguatahtr aff,asjdakiu fa aslkplorem pipsioandiae
</span>
</p>

<pre> </pre>
<!-- Trigger toggleText() when the
button is clicked -->
<button onclick="toggleText()" id="textButton";>
More Details 
</button>

However when I try to use the same script on the same webpage the second section will not work accordingly.

One section will work accordingly, displaying less/more text when the button it is pressed and the second section will display the whole text. Show less/more text will not be triggered.

Any help would be much appreciated.

Regards, 

Cristi