使用一个代码在多个 div 上切换阅读更多和阅读更少

Question

下面给出的 javascript 代码用于打开和关闭我页面中的多个 div。下面的代码在网站中打开和关闭多个 div，但是当我打开一个 div.

时，文本 Read more and Read less APPLY ON ALL 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>

感谢您的帮助

Answer 1

这是你想要的吗？

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

我改变了两件事，首先我把 $(".content-new").is(':visible') 改成了 $(this).prev(".content-new").is(':visible')
其次，我将 $(".show_hide_new").text(txt); 更改为 $(this).text(txt);

演示

$(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 -->

Answer 2

试试这个：

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");
  });
});

默认将 content-new 与显示 none

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

Answer 3

$(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 -->

使用一个代码在多个 div 上切换阅读更多和阅读更少

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

javascript

jquery

toggle