show more/Less text with just HTML and JavaScript

user_3067868 0
Viewed 158407

I am needing to create a show more/less text function, but with just JavaScript and HTML.. I can't use any additional libraries such as jQuery and it can't be done with CSS. The sample code I have added displays the 'more' text, but not the 'less'.

If someone could point me in the right direction, it would be much appreciated.

I've spent the majority of the day frying my brain over this, as its clearly not the modern way to do it, however, my HTML is:

<html>
<head>
<script type="text/javascript" src="moreless.js"></script>
</head>

<body>
Lorem ipsum dolor sit amet
<p>

<p id="textarea"><!-- This is where I want to additional text--></div>
</p>

<a onclick="showtext('text')" href="javascript:void(0);">See More</a>
<p>
Here is some more text 
</body>
</html>

and my JavaScript is (moreless.js):

function showtext()
{
var text="Here is some text that I want added to the HTML file";
document.getElementById("textarea").innerHTML=text;
}
html javascript
10 Answers

I hope this helps you. Here is the functionality:

  • When text characters is less than or equal to 12. Then it displays the whole text and also does not display the more/less button
  • When text characters is more than 12. Displays only 12 characters of the text and also a More button which when pressed, shows the whole text.
  • When the More button is pressed the button changes to Less

Read more string manipulation in w3schools: String Manipulation or Mozila: String Manipulation

var startStatus = "less";

function toggleText() {
  var text = "Here is the text that I want to play around with";

  if (text.length > 12) {
    if (startStatus == "less") {
      document.getElementById("textArea").innerHTML = `${text.substring(0, 12)}...`;
      document.getElementById("more|less").innerText = "More";
      startStatus = "more";
    } else if (startStatus == "more") {
      document.getElementById("textArea").innerHTML = text;
      document.getElementById("more|less").innerText = "Less";
      startStatus = "less";
    }
  } else {
    document.getElementById("textArea").innerHTML = text;
  }
}

toggleText();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div>
    <p id="textArea">
      <!-- This is where i want text displayed-->
    </p>
    <span><a
          id="more|less"
          onclick="toggleText();"
          href="javascript:void(0);"
        ></a
      ></span>
  </div>
</body>

</html>

user_135587640

I'm not an expert, but I did a lot of looking to implement this for myself. I found something different, but modified it to accomplish this. It's really quite simple:

The function takes two arguments, a div containing only the words "show more" [or whatever] and a div containing the originally hidden text and the words "show less." The function displays the one div and hides the other.

NOTE: If more than one show/hide on page, assign different ids to divs Colors can be changed

<p>Here is text that is originally displayed</p>

<div id="div1">
<p style="color:red;" onclick="showFunction('div2','div1')">show more</p></div>
<div id="div2" style="display:none">

<p>Put expanded text here</p>

<p style="color:red;" onclick="showFunction('div1','div2')">show less</p></div>

<p>more text</p>

Here is the Script:

<script>
function showFunction(diva, divb) {
    var x = document.getElementById(diva);
    var y = document.getElementById(divb);
          x.style.display = 'block';
          y.style.display = 'none';
}
</script>
user_86710030

You can also use details HTML tag which does the work for you.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Source W3CSchool

user_56099680
Related