JQuery click (function ()) does not use variable on first click
I have this little script:
var $totalHeight;
$(document).ready(function() {
$totalHeight = $('#sidebar-container').innerHeight();
$('.sidebar-heading').each(function() {
$totalHeight = ($totalHeight - $(this).outerHeight());
});
$('.sidebar-contents').each(function() {
if ($(this).hasClass('active')) {
$(this).css('height',$totalHeight);
}
});
$('.sidebar-heading').click(function() {
$('.sidebar-contents').slideUp().removeClass('active').addClass('inactive')/*.css('height','').removeAttr('style')*/;
$('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
$(this).addClass('active').next().addClass('active').removeClass('inactive').css('height',$totalHeight).slideDown();
});
});
I'm sure it's obvious what he should be doing.
My problem: the first click on ('.sidebar-heading')
won't apply the desired one $totalHeight
to its sibling. Next clicks, it is. What am I doing wrong?
I have a draft HTML with this code in action . I commented these parts above to check where the error is, but still couldn't figure it out.
source to share
You can also let the fx function set the height on its own to avoid the conflict mentioned in @LeeMeador's answer .
Since slideDown () does not accept any css value, we can use the animate () function directly.
$('.sidebar-heading').click(function () {
$('.sidebar-heading').removeClass('active');
$('.sidebar-contents').removeClass('active').addClass('inactive').stop().animate({ height: '0px' });
$(this).addClass('active').next().addClass('active').removeClass('inactive').stop().animate({ height: $totalHeight + 'px' });
});
Also, use stop () before doing any animation to prevent weird behavior if you hit the title again before the previous animation has finished.
Modified jsfiddle: http://jsfiddle.net/z62tr/4/
source to share
In slideUp () animation it takes some time to execute and clear all heights and display styles after they are finished. This erases the adjustment made on the next two lines.
Try until slideUp () succeeds for others.
$('.sidebar-heading').click(function() {
var self = this;
$('.sidebar-contents').slideUp(undefined, function() {
$('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
$(self).addClass('active')
.next().addClass('active').removeClass('inactive')
.css('height',$totalHeight).slideDown();
}).removeClass('active').addClass('inactive')
/*.css('height','').removeAttr('style')*/;
});
I figured this out while working in Chrome with the debugger and noticing that styles were changing differently. The first click on the 2nd heading will leave the height set at the 1st course even if the code cleared it. This means that something was, maybe, wrong. So I tried the above code on the generated jsFiddle. Lo and lo and behold ...
source to share