<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to create Show More and Show Less
functionality for hiding text using JavaScript ?
</
title
>
<
style
>
/* Initially, hide the extra text that
can be revealed with the button */
#moreText {
/* Display nothing for the element */
display: none;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>Show More and Show Less Example</
h3
>
<
p
>
GeeksforGeeks was born out of necessity-
a need to provide a convenient and
one-stop educational portal to all the
students of Computer Science.
<
span
id
=
"points"
>...</
span
>
<
span
id
=
"moreText"
> This necessity was
as personal to me as it was universal.
This need combined with my passion for
teaching resulted in GeeksforGeeks as
we know today. My message to you, in
our inaugural edition of Geeks Digest,
would be that if you are looking for
a problem to work on, you don’t need
to look very far for it. All you should
do is to look around yourself.
</
span
>
</
p
>
<
button
onclick
=
"toggleText()"
id
=
"textButton"
>
Show More
</
button
>
<
script
>
function toggleText() {
// Get all the elements from the page
let points =
document.getElementById("points");
let showMoreText =
document.getElementById("moreText");
let 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
>
</
body
>
</
html
>