title: How to toggle my div content independently using a single jquery script
body: <p>Please, some contents in my div were hidden using the script below, with a read more button to display the full contents of each div. The problem is that when i click on the read more button, it displays the contents of all divs with "class abt". Is there a way to maneuver this, so i dont have to create multiple class and multiple script to match each of the classes?? </p>
  
  <p>Below is my script:</p>
  
   
  
          $(document).ready(function(){
          $(".abt").hide();
              $(".toggle").click(function(){
          $(".abt").toggle();
          $(".toggle").hide();
  
              });
          });
          
  
  <p>Below is my html content</p>
  
  <pre><code>   &lt;div&gt;lets make the &lt;span class="abt"&gt;World a better place     &lt;/span&gt;         &lt;a style="font-weight:bold;" class="toggle"&gt;Read more&lt;/a&gt;  &lt;/div&gt;
  </code></pre>
  
  Hello world Hello stackoverflow      Read more  
  
  This is the lifeI want to live    Read more