jQuery, hide and show content
Question
I have some content/Text that is now showing and hiding on a button click, the content is hidden first then shows on a click and hides on click.
I am trying to get only half of the text hidden instead, and show it on a click, also hide the half on a click instead of hiding the whole text and showing the whole text.
This code is working fine but hiding/showing the whole content.
I am new to jQuery :)
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e){
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
Thanks!
2 answers
solution1
2 2018-05-11 12:21:35
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>
solution2
2 ACCPTED 2018-05-11 12:22:56
You can add the whole text as in var then you will be able to cut from it as you want by slice function ,
then you will be able to add the whole text or sliced text
$(function(){ $("p").each(function(){ var wholeTxt = $(this).text(); var cuttedText = wholeTxt.slice(0, 25); // you can add as you want $(this).text(cuttedText); $(this).click(function(){ if(!$(this).hasClass("opend")){ $(this).addClass("opend"); $(this).text(wholeTxt); }else { $(this).removeClass("opend"); $(this).text(cuttedText); } }) }) })
p { cursor : pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="reveal"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> hello world hello world hello world hello world </p> <p> hello world 2 hello world 2 hello world 2 hello world 2</p> <p> hello world 3 hello world 3 hello world 3</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.