title: JavaScript Read More / Read Less
body: <p>Can someone help me with this issue, i need to hide and show content between two elements, which are represented by read more and read less buttons. In my example it works fine, but my problem  is when i click 'Read More' button it should hide, and 'Read Less' should appear, and vice versa.
  I need to keep those anchor elements, because this text should be translatable be end user, so they wouldn't have access to javascript code.
  Please help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.service-info').hide();
        $('.read-more').click(function(){
            $(this).nextUntil('.read-less').show();
  
          })
        $('.read-less').click(function(){
          $(this).prevUntil('.read-more').hide();
  
        })
    })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" class="read-more"&gt;Read More &lt;/a&gt;
    &lt;div class="service-info"&gt;
  
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
    &lt;/div&gt;
  &lt;a href="#" class="read-less"&gt;Read Less&lt;/a&gt;
  
  
  &lt;div class="separator"&gt;&lt;hr&gt;&lt;/div&gt;
  
  
  &lt;a href="#" class="read-more"&gt;Read More &lt;/a&gt;
    &lt;div class="service-info"&gt;
  
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
      &lt;p&gt; Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret&lt;/p&gt;
  
    &lt;/div&gt;
  &lt;a href="#" class="read-less"&gt;Read Less&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>