How can I do a toggle visibility version of a read more function?

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>

The "read more" text disappears when expanded, which makes sense, so what should appear afterwards in order for the user to hide the text? A button? — glhrmv, Jun 17 '17 at 19:53

James Douglas · Accepted Answer · 2017-06-24T00:54:13.743

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>

this is not related to OP's problem, just out of curious. I want to know why cant have the function in a variable? Is it that jquery can't register the the handler if I put it in a function and execute the function? — Surely, Jun 17 '17 at 20:04
@Surely Refer to this: https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname . also, because it takes less code. — James Douglas, Jun 17 '17 at 20:06
I am also using functions on variables because it is the pattern I am using. You should take a look to the whole architecture of my project. — Reacting, Jun 17 '17 at 20:28
instead of setting height as `$(this).prev()[0].scrollHeight + 'px'` you can also set it as `auto` and let the browser work it out itself. — Richard Parnaby-King, Jun 23 '17 at 09:15

How can I do a toggle visibility version of a read more function?

1 Answers1