Rafael Vrn Rafael Vrn - 14 days ago 8
Javascript Question

Animation triggered on second click

I would like to animate this div so when i click the "Show More" button the height changes depending on the height of the text. I have problems with the animations 'cuz it's triggered only on the second click on the "Show More" button. Any idea please??

This is the html file :

<div class="col-sm-4 ">
<div class="testimonial">
<h5>John P.</h5>
<div id="div1" class="comment-container" ng-class="{show1:show1}">
<p>“Yes very good experience, the tekker came on time and known how to do his job, very pleased with the service.“
</p>
</div>

<button id="comm1" class="btn btn-info1 btn-xs" style="cursor: pointer; margin-top: 20px; margin-bottom: 12px; border-radius: 10px;"
ng-click="homeCtrl.animateComment();" ng-show="!show1">Show more
</button>

<button class="btn btn-info2 btn-xs" style="cursor: pointer; margin-bottom: 12px; border-radius: 10px;"
ng-click="show1 = false;" ng-show="show1">Show less
</button>
</div>

<img class="triunghi" src="/img/triunghi.png">
</div>


This is the CSS:

.comment-container {
font-size: 16px;
line-height: 20px;
height: 52px;
overflow: hidden;
margin-bottom: -12px;
}
.show-more{
cursor: pointer; margin-top: 20px; margin-bottom: 12px;
}
.show-less{
cursor: pointer; margin-bottom: 12px;
}
.show1 {
overflow: visible;
height: auto;
}
.show2 {
overflow: visible;
height: auto;
}
.show3 {
overflow: visible;
height: auto;
}


And this is the javascript and jquery:

function animateComment() {
$scope.show1 = true;
$("#comm1").click(function(){
$("#div1").animate({
left: '250px',
opacity: '0.5',
height: '150px'
},2000);
});
}

Answer

Remove the .click() method call in your function; that is for attaching event handlers, not calling them. Try this:

function animateComment() {
    $scope.show1 = true;
    $("#div1").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px'
    }, 2000);
}