I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content.
This is the code I am using:
<div id="Presentation" style="text-align:justify;"><?php echo $data['texte_presentation'];?></div>
<div id="fadeout" class="fadeout" style="display:none;"></div>
<div id="DivReadMore" style="text-align:right;margin-top:-4em;display:none;">
<hr style="margin:5px;"><button id="BoutonReadMore" class="btn btn-warning btn-block"><i class="fa fa-plus"></i> Show More</button>
</div>
<script>
$(document).ready(function () {
ReadMore();
$(window).on('resize', function(){
if($('#Presentation').hasClass("read-more"))
{}else{
ReadMore();
}
});
$("#BoutonReadMore").click(function(){
$("#Presentation").css({'max-height':'', 'overflow':''});
$("#DivReadMore").hide();
$("#fadeout").hide();
$("#Presentation").addClass("read-more");
});
});
function ReadMore() {
var height = $('#Presentation').height();
if(height > 200)
{
$("#Presentation").css({'max-height':'250px', 'overflow':'hidden'});
$("#fadeout").show();
$("#DivReadMore").show();
}else{
$("#Presentation").css({'max-height':'', 'overflow':''});
$("#fadeout").hide();
$("#DivReadMore").hide();
}
}
</script>
Any suggestions on how to implement this animation?