title: Toggle Read more and Read less on multiple divs with one code
body: <p>This below given javascript code is used to open and close multiple div in my page. This below code is opening and closing multiple divs in website but the text Read more and Read less APPLY ON ALL div when I open one div.</p>
  
  <pre><code>&lt;div class="box"&gt;
  
  &lt;li&gt;GST Registration&lt;/li&gt; 
  &lt;li&gt;Final Proprietorship Registration in 10 Working Days&lt;/li&gt;
  
  &lt;div class="content-new"&gt; &lt;!-- This is hide by default and open on toggle --&gt;
      &lt;li&gt;Current Bank Account Opening KIT &lt;/li&gt;
      &lt;li&gt;MSME Certificate&lt;/li&gt;
      &lt;li&gt;CA Certificate &lt;/li&gt;
      &lt;li&gt;TAN Acknowledgement)&lt;/li&gt;                   
  &lt;/div&gt;
  
  &lt;div class="show_hide_new"&gt;
  Read More
  &lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- box closed --&gt;
  
  
  
  
  Below I repeat above code just explain that multiple divs should show read more and real less individually. 
  
  &lt;div class="box"&gt;
  
  &lt;li&gt;GST Registration&lt;/li&gt; 
  &lt;li&gt;Final Proprietorship Registration in 10 Working Days&lt;/li&gt;
  
  &lt;div class="content-new"&gt; &lt;!-- This is hide by default and open on toggle --&gt;
      &lt;li&gt;Current Bank Account Opening KIT &lt;/li&gt;
      &lt;li&gt;MSME Certificate&lt;/li&gt;
      &lt;li&gt;CA Certificate &lt;/li&gt;
      &lt;li&gt;TAN Acknowledgement)&lt;/li&gt;                   
  &lt;/div&gt;
  
  &lt;div class="show_hide_new"&gt;
  Read More
  &lt;/div&gt;
  
  &lt;/div&gt; &lt;!-- box closed --&gt;
  
  &lt;script &gt;
  $(document).ready(function () {
      $(".content-new").hide();
      $(".show_hide_new").on("click", function () {
          var txt = $(".content-new").is(':visible') ? 'Read More' : 'Read Less';
          $(".show_hide_new").text(txt);
          $(this).prev('.content-new').slideToggle(100);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks for your help</p>