title: how to expand the text on clicking the read more button or link?
body: <p>I have a js function which toggles between two spans of texts. One is smaller text with class collapsed and the other is full text with class expanded.</p>
  
  <p>here is my js</p>
  
  <pre><code>$(document).ready(function() {
      $(".expanded").hide();
  
      $(".expanded, .collapsed").click(function() {
          $(this).parent().children(".expanded, .collapsed").toggle();
      });
  });
  </code></pre>
  
  <p>and my html look like this</p>
  
  <pre><code>&lt;span class="collapsed"&gt;
   some small text
   &lt;a href="javascript:void(0)"&gt; READ MORE&gt;&gt;&lt;/a&gt;
  &lt;/span&gt;
  
  &lt;span class="expanded"&gt;
   here come the full text to replace the small text
   &lt;a href="javascript:void(0)"&gt;Less&gt;&gt;&lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The preset function replaces the text of one part with another. My problem is that when we click on any part of any span either collapsed or expanded, the text is changed. I want to restrict it to change the text only when one click the READ MORE>> or Less>> link. I have gone so far in this design that I cant change the function now. I want changes while staying the in present function. Any ideas??   </p>