title: Read more/Read less not functioning correctly
body: <p>I’m trying to add a read more/read less functions to my collection pages for one of the companies that we represent but it’s not functioning correctly as soon as you press the Readmore button it opens then closes straight away and will not open again? Does anybody know why this is happening? I have attached a link through the page and also pasted the code I am using.</p>
  <p><a href="https://muckbootcompany.eu/collections/commuting#" rel="nofollow noreferrer">https://muckbootcompany.eu/collections/commuting#</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>// The function toggles more (hidden) text when the user clicks on "Read more". The IF ELSE statement ensures that the text 'read more' and 'read less' changes interchangeably when clicked on.
  $('.moreless-button').click(function() {
    $('.moretext').slideToggle();
    if ($('.moreless-button').text() == "Read more") {
      $(this).text("Read less")
    } else {
      $(this).text("Read more")
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="section"&gt;
    &lt;div class="article"&gt;
      &lt;p&gt;Bacon ipsum dolor amet sirloin jowl turducken pork loin pig pork belly, chuck cupim tongue beef doner tri-tip pancetta spare ribs porchetta.
      &lt;/p&gt;
      &lt;p class="moretext"&gt;
        Brisket ball tip cow sirloin. Chuck porchetta kielbasa pork chop doner sirloin, bacon beef brisket ball tip short ribs.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;a class="moreless-button" href="#"&gt;Read more&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/6HwKd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6HwKd.png" alt="image" /></a></p>