title: “Read More” description is not hidden by default, but only after clicking the button
body: <p>I have a problem where I want the “READ MORE” button to show the description once the user clicks on it, by default the description should be hidden, after user click on “READ MORE” it should show it. But sadly it shows the description at default and after I click the “READ MORE” and “READ LESS” button, then it hides the description.</p>
  
  <p>This is my code and my <a href="https://jsfiddle.net/Lc5kpw8q/" rel="nofollow noreferrer">JSFiddle</a>:</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>function myFunction1() {
    var dots1 = document.getElementById("dots1");
    var moreText1 = document.getElementById("more1");
    var btnText1 = document.getElementById("myBtn1");
  
    if (dots1.style.display === "none") {
      dots1.style.display = "inline";
      btnText1.innerHTML = "READ MORE";
      moreText1.style.display = "none";
    } else {
      dots1.style.display = "none";
      btnText1.innerHTML = "READ LESS";
      moreText1.style.display = "inline";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-body"&gt;
    &lt;!--Title--&gt;
    &lt;h4 class="card-title"&gt;Johor Rugby Carnival Meets 96 teams at EduCity&lt;/h4&gt;
    &lt;!--Text--&gt;
    &lt;p class="card-text"&gt; &lt;span id="dots1"&gt;&lt;/span&gt;&lt;span id="more1"&gt;erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.&lt;/span&gt;&lt;/p&gt;
    &lt;button onclick="myFunction1()" id="myBtn1" class="btn btn2"&gt;READ MORE&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the description would be hidden at default and only shown after the user clicks the “READ MORE” button.</p>