WebSite X5Help Center

 
Ionescu C.
Ionescu C.
User

Show less/more java script  en

Author: Ionescu C.
Visited 580, Followers 1, Shared 0  

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

Posted on the
4 ANSWERS - 1 USEFUL - 1 CORRECT
Incomedia
Stefano G.
Incomedia

Hello Ionescu 

Unfortunately, since your topic concerns custom codes primarily, the Staff is unable to provide support for it

However, I will leave this topic open so that other users might eventually stop by and help you out with this

Thank you for your understanding

Stefano

Read more
Posted on the from Stefano G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month PT
Ionescu C.
... ... ... when I try to use the same script on the same webpage the second section will not work accordingly. ... ... ... Any help would be much appreciated. ... ... ....

... you have to assign different IDs for the different texts, and associate the functions related to these ...
... it's all in the attached file; ... to try just copy / paste ...

ciao

...↓...

Read more
Posted on the from  ‪ KolAsim ‪ ‪
John S.
John S.
User

Oh - the page is protected by X5.

You can just use Ctrl+U to see the code.

This also shows the value of the right-click-protedtion.

Read more
Posted on the from John S.