How can I do a toggle visibility version of a read more function?
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>1 answer
-
answered 2017-06-17 19:48
James Douglas
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
don't really need toshouldn't have the function inside a variable.You should also 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'> HIDE MORE </div> </div>