Переключить Читать больше и Читать меньше на нескольких делениях с одним кодом - PullRequest
Новая
       16

Переключить Читать больше и Читать меньше на нескольких делениях с одним кодом

2 голосов
/ 05 июня 2019

Этот нижеприведенный код javascript используется для открытия и закрытия нескольких 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>

Спасибо за вашу помощь

Ответы [ 3 ]

2 голосов
/ 05 июня 2019

попробуйте это: 

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

По умолчанию поставить новый контент с отображением none 

<div class="content-new" style="display: none;">
2 голосов
/ 05 июня 2019

Это то, что вы хотите? 

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

Я изменил 2 вещи, сначала я изменил $(".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 -->
0 голосов
/ 05 июня 2019 

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