1

In the following code, the text within the <span class="more"> tag is not hidden by default. I have to click the button to hide the text.

How can I achieve that the text is hidden per default when the page is loaded?

var i = 0;
function read() {
  if (!i) {
    document.getElementById("more").style.display = "inline";
    document.getElementById("dot").style.display = "none";
    document.getElementById("read").innerHTML = "Read less";
    i = 1;
  } else {
    document.getElementById("more").style.display = "none";
    document.getElementById("dot").style.display = "inline";
    document.getElementById("read").innerHTML = "Read more";
    i = 0;
  }
}
<p class="text-left">
        There are a majority of people use the iPhone. Solutions know iPhone is the
        powerful smartphone device today and available to us.
<span id="dot">...</span>
<span id="more">
     We have expert mobile app developer, fortunately, Solutions is capable
     to develop the best app for your business. Our expert high optimized and
     suitable apps and games for your iPhone with high technical expertise
     and provide maximum functionality to the device while fulfilling your
     needs in a professional manner with attractive looks.
</span>
</p>
<button type="button" id="read" onclick="read()">Read more></button>
akraf
  • 2,965
  • 20
  • 44
FaSiH Ur ReHmAn
  • 21
  • 3

2 Answers2

0

The JavaScript code you have is not executed by default. It is only run when you click the button. Therefore, all <span> elements are visible per default.

Either:

Set a CSS to hide the class="more" elements per default

or:

Execute the read() function on page load See this question

akraf
  • 2,965
  • 20
  • 44
0

You haven't written the code to hide it by default. Either write this after var i = 0;

document.getElementById("more").style.display = "none";

or set inside css

.more{display: none;}
Deepinder Singh
  • 729
  • 10
  • 18