javascript - Angular Accordion not expanding the height -

i'm using angular accordion directive hide/show content.

the problem facing height of content's container not changing.

here's plunker: http://plnkr.co/edit/owxrqojpaypdbe4twt3c?p=preview

if click on show more, can see how contents hidden rather height of show-jobs changing.

js:

app.directive('slidercontentdirective', function () {     return {         restrict:'a',         compile: function (element, attr) {             // wrap tag             var contents = element.html();             element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');              return function postlink(scope, element, attrs) {                 // default properties                 attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;                 attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;                 element.css({                     'overflow': 'hidden',                     'height': '0px',                     'transitionproperty': 'height',                     'transitionduration': attrs.duration,                     'transitiontimingfunction': attrs.easing                 });             };         }     }; });  app.directive('slidertoggledirective', function($document, $timeout) {     return {         restrict: 'ae',         scope: {              target: "@"         },         link: function(scope, element, attrs) {                           var timeoutfunc = function () {                 var target = angular.element($document[0].queryselector("#" + scope.target))[0];                  attrs.expanded = false;                   element.bind('click', function() {                      var content = target.queryselector('.slideable_content');                     if(!attrs.expanded) {                         content.style.border = '1px solid rgba(0,0,0,0)';                         var y = content.clientheight;                         content.style.border = 0;                         target.style.height = y + 'px';                     }                     else {                         target.style.height = '0px';                     }                      attrs.expanded = !attrs.expanded;                 });             }              $timeout(timeoutfunc, 0);         }     } }); 

if inspect show-jobs element, can see has initial height of 312px. if remove this, works expected.

as giliar said, problem have fixed height not allow section element automatically height fit of content (including newly expanded accordion). solution can propose (which pretty bootstrap far can tell)

1. set section's height auto when animation finished, if nested divs expanded section expand correctly.
2. re-set fixed height section when user attempts close it, before setting height 0, closing animation work correctly.

to first part can define function adjusts section's height auto , call after expand animation finished.

var adjustheightfunc = function() {     var target = angular.element($document[0].queryselector("#" + scope.target))[0];     if (attrs.expanded) {         var content = target.queryselector('.slideable_content');         target.style.height = 'auto';     } } 

since expand animation takes 0.7 seconds can call adjustheightfunc function timeout of 0.8 seconds (i not optimal, since if change duration of animation need change timeout, it's best solution have found far, other suggestions welcome). in end of onclick function can have:

$timeout(adjustheightfunc, 800); 

to second part not set section's height 0 when section should collapsed, set height of contents. after this, , if section should collapsed, call separate function using $timeout value of 0 (so executed on separate digest cycle) sets section's height 0 triggering collapse animation. onclick function therefore becomes this:

element.bind('click', function() {     var content = target.queryselector('.slideable_content');     var y = content.clientheight;     target.style.height = y + 'px';     if(!attrs.expanded) {         content.style.border = '1px solid rgba(0,0,0,0)';         content.style.border = 0;     }     else {         $timeout(closeaccordionfunc, 0);     }      attrs.expanded = !attrs.expanded;     $timeout(adjustheightfunc, 800); }); 

see updated plunker.

edit: turns out comments setting closeaccordionfunc executed timeout 0 not work browsers. workaround declare css class set element's height auto (using !important override height set directly on element) , use angular's $animate service add / remove class element , execute closeaccordionfunc after class has been removed. updated onclick function therefore is:

element.bind('click', function() {     var content = target.queryselector('.slideable_content');     var y = content.clientheight;     target.style.height = y + 'px';     if(!attrs.expanded) {         content.style.border = '1px solid rgba(0,0,0,0)';         content.style.border = 0;     }     else {       $animate.removeclass(angular.element(target), 'auto', function(){$timeout(closeaccordionfunc);});     }      attrs.expanded = !attrs.expanded;     if (attrs.expanded) {       $timeout(adjustheightfunc, 800);     } }); 

see in plunker.