如何做更多功能的切换可见性版本？

Question

I am trying to do a toggle(hide and show) version of read more function. For now I can only show the rest of the text, not not hide it.

Any suggestions?

 $(document).ready(function(){ var toggleReadMore = function() { $('#read-more').click(function(e) { var prev = $(this).prev(); $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px'); $(this).hide(); $('#read-less').show(); }); }; toggleReadMore(); }()); 

 #p { height: 50px; overflow: hidden; } #read-less { display: none; } #read-more, #read-less { background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1)); color: blue; cursor: pointer; position: absolute; bottom: -20px; padding: 15px 0; text-align: center; width: 100%; } #wrapper { position: relative; width: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='wrapper'> <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p> <div id='read-more'> READ MORE </div> <div id='read-less'> READ LESS </div> </div> 

Answer 1

Update your function to this:

$(document).ready(function() {
  $('#read-more').click(function(e) {
    $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
    $(this).hide();
    $(this).next('#read-less').show();
  });
  $('#read-less').click(function(e) {
    $(this).prev().prev().css('height', '50px');
    $(this).hide();
    $(this).prev('#read-more').show();
  });
});

You should use the latest version of jQuery, which is 3.2.1 and not 2.1.1

 $(document).ready(function() { $('#read-more').click(function(e) { $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px'); $(this).hide(); $(this).next('#read-less').show(); }); $('#read-less').click(function(e) { $(this).prev().prev().css('height', '50px'); $(this).hide(); $(this).prev('#read-more').show(); }); }); 

 #p { height: 50px; overflow: hidden; } #read-less { display: none; } #read-more, #read-less { background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 255, 255, 1)); color: blue; cursor: pointer; position: absolute; bottom: -40px; padding: 15px 0; text-align: center; width: 100%; } #wrapper { position: relative; width: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id='wrapper'> <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p> <div id='read-more'> READ MORE </div> <div id='read-less'> SHOW LESS </div> </div>