Ce code javascript ci-dessous est utilisé pour ouvrir et fermer plusieurs div dans ma page. Ce code ci-dessous ouvre et ferme plusieurs divs dans le site Web, mais le texte En savoir plus et En savoir moins APPLIQUER SUR TOUS les div lorsque j'ouvre un 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>
Merci pour votre aide
p>
3 Réponses :
Est-ce ce que vous voulez?
<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 -->
J'ai changé 2 choses, j'ai d'abord changé $ (". content-new"). is (': visible ')
à $ (this) .prev (". content-new"). is (': visible ')
seconde, j'ai changé $ (". show_hide_new"). text (txt);
en $(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); }); });
$(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); }); });
Pas de problème @Ankitsethi, heureux d'aider
essayez ceci:
<div class="content-new" style="display: none;">
Par défaut, mettez le contenu nouveau avec display none
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"); }); });
<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 -->
$(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") } }); });