Toggle Read more and Read less on multiple divs with one code

Question

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.

<div class="box">

<li>GST Registration</li> 
<li>Final Proprietorship Registration in 10 Working Days</li>

<div class="content-new"> <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>                   
</div>

<div class="show_hide_new">
Read More
</div>

</div> <!-- box closed -->




Below I repeat above code just explain that multiple divs should show read more and real less individually. 

<div class="box">

<li>GST Registration</li> 
<li>Final Proprietorship Registration in 10 Working Days</li>

<div class="content-new"> <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>                   
</div>

<div class="show_hide_new">
Read More
</div>

</div> <!-- box closed -->

<script >
$(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);
    });
});
</script>

Thanks for your help

score 3 · Accepted Answer · answered Jun 05 '19 at 06:45

Is this what you want?

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    var txt = $(this).prev(".content-new").is(':visible') ? 'Read More' : 'Read Less';
    $(this).text(txt);
    $(this).prev('.content-new').slideToggle(100);
  });
});

I've changed 2 things, first I've changed $(".content-new").is(':visible') to $(this).prev(".content-new").is(':visible')
second I've changed $(".show_hide_new").text(txt); to $(this).text(txt);

demo

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    var txt = $(this).prev(".content-new").is(':visible') ? 'Read More' : 'Read Less';
    $(this).text(txt);
    $(this).prev('.content-new').slideToggle(100);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>

</div>
<!-- box closed -->




Below I repeat above code just explain that multiple divs should show read more and real less individually.

<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>

</div>
<!-- box closed -->

No problem @Ankitsethi, Happy to help – Carsten Løvbo Andersen Jun 05 '19 at 09:58 — Carsten Løvbo Andersen, Jun 05 '19 at 09:58

score 2 · Answer 2 · answered Jun 05 '19 at 07:01

try this:

jQuery(document).ready(function() {
  jQuery('.show_hide_new').on('click', function(){
    jQuery(this).parent().find('.content-new').toggle();
    jQuery(this).text(jQuery(this).text() == "Read More" ? "Read Less" : "Read More");
  });
});

By default put the content-new with display none

<div class="content-new" style="display: none;">

score 0 · Answer 3 · answered Jun 05 '19 at 07:32

$(document).ready(function() {
  $(".content-new").hide();
  $(".show_hide_new").on("click", function() {
    $(this).prev('.content-new').slideToggle(100);
    console.log($(this).text().trim())
    if ($(this).text().trim() == "Read More") {
      $(this).text("Read Less");
    } else {
      $(this).text("Read More")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>
  <br>
</div>
<!-- box closed -->




Below I repeat above code just explain that multiple divs should show read more and real less individually.

<div class="box">

  <li>GST Registration</li>
  <li>Final Proprietorship Registration in 10 Working Days</li>

  <div class="content-new">
    <!-- This is hide by default and open on toggle -->
    <li>Current Bank Account Opening KIT </li>
    <li>MSME Certificate</li>
    <li>CA Certificate </li>
    <li>TAN Acknowledgement)</li>
  </div>

  <div class="show_hide_new">
    Read More
  </div>
  <br>

</div>
<!-- box closed -->

Toggle Read more and Read less on multiple divs with one code

3 Answers3