title: The text does not hide after the refresh ac any one help me with that. I have to click the button
body: <p>In the following code, the text within the <code>&lt;span class="more"&gt;</code> tag is not hidden by default. I have to click the button to hide the text. </p>
  
  <p>How can I achieve that the text is hidden per default when the page is loaded?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="text-left"&gt;
          There are a majority of people use the iPhone. Solutions know iPhone is the
          powerful smartphone device today and available to us.
  &lt;span id="dot"&gt;...&lt;/span&gt;
  &lt;span id="more"&gt;
       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.
  &lt;/span&gt;
  &lt;/p&gt;
  &lt;button type="button" id="read" onclick="read()"&gt;Read more&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>