javascript – How to achieve the effect of reading more?

Question:

I have a text which I do not want to show completely, only part of it and have the option to "read more" with a button or whatever. I try the following, but for some reason it doesn't work for me:

 $(document).ready(function() { $(".more").toggle(function() { $(this).text("Leer menos...").siblings(".complete").show(); }, function() { $(this).text("Leer mas...").siblings(".complete").hide(); }); });
 .more { cursor: pointer; background-color: #ccf; } .complete { display: none; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="text-comment"> <p class="text-par">"Vision"</p> <p class="text-name"> <span class="summary"> <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p> </span> <span class="complete"> <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p> <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p> </span> <span class="more">Leer mas...</span> </p> </div>

If it can be done with JavaScript alone it would be much better, but all the examples I found are with jQuery.

Answer:

The problem why the code does not work for you is because of how you are using toggle . This method hides / shows elements passing it two parameters: duration and function to be executed when the animation is completed. As you are trying to execute it, it is equivalent to the toggle event that was deprecated as of version 1.8 and removed as of version 1.9. This is because you probably relied on a tutorial or page that was out of date.

One solution would be to listen to the click event and toggle #complete (also changing the button text). Something like this:

 $(document).ready(function() { $(".more").on("click", function() { // cambiar la visibilidad de complete $(".complete").toggle(); // cambiar el texto del boton dependiendo del texto actual if ($(this).text() == "Leer menos...") { $(this).text("Leer mas..."); } else { $(this).text("Leer menos..."); } }); });
 .more { cursor: pointer; background-color: #ccf; } .complete { display: none; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="text-comment"> <p class="text-par">"Vision"</p> <p class="text-name"> <span class="summary"> <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p> </span> <span class="complete"> <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p> <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p> </span> <span class="more">Leer mas...</span> </p> </div>
Scroll to Top