So this is what I want to achieve:
(Ignore the turquoise cells)
As you may see, the whole text is blurry because of the gradiente which should be over the text. When you click on the READ MORE button, the element should go until the bottom and remove the gradient, and when you click on READ LESS, it should get back to its original state.
Right now the design doesn't look like the one I did in the code and I need it exactly. But I am running out of ideas in order to get the same exact same thing as in the design.
Any suggestions?
And this is the code:
$(document).ready(function(){
var toggleReadMore = function() {
$('#read-more').click(function(e) {
$(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
$(this).hide();
$(this).next('#read-less').show();
});
$('#read-less').click(function(e) {
$(this).prev().prev().animate({height: '90px'}, 400);
$(this).hide();
$(this).prev('#read-more').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>
