Failed to get height from jQuery toggleClass
I want to get the height of the class that is toggled. When the button is clicked, the class is added .category-menu-visible
. If the class exists, then I want to get its height. But when I warn menuHeight
, it's 0.
Actual code:
JQuery
jQuery('.topics-btn').click(function(){
jQuery('.category-menu-wrap').toggleClass('category-menu-visible');
if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
var menuHeight = jQuery('.category-menu-visible').height();
alert(menuHeight);
jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
} else {
jQuery('.sidebar .content-wrap').css('margin-top', 0);
}
});
CSS
.category-menu-wrap {
width:100%;
height:0px;
background-color:#F7D5B6;
overflow: hidden;
transition: height .5s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
height: 70px;
transition: height .3s cubic-bezier(.27,1.76,.95,1.1);
}
Why can't he get height?
source to share
You need to wait until the transition is complete. Update: There is a useful transitionend event for this :
jQuery('.topics-btn').click(function(){
var $menu = jQuery('.category-menu-wrap');
$menu.toggleClass('category-menu-visible');
$menu.on("transitionend", function(){
if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
var menuHeight = jQuery('.category-menu-visible').height();
alert(menuHeight);
jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
} else {
jQuery('.sidebar .content-wrap').css('margin-top', 0);
}
});
});
.category-menu-wrap {
height: 0;
}
.category-menu-visible {
height: 70px;
transition: height .3s cubic-bezier(.27,1.76,.95,1.1);
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button class='topics-btn'>Click</button>
<div class='category-menu-wrap'></div>
source to share
From official docs
The value specified in .height () is not guaranteed to be hidden when the element or its parent. To get the exact value, make sure the element is visible before using .height ()
The problem here is yours is .category-menu-visible
not showing up. when JQuery looks for it. This is because the transition property is set with duration in the overloaded class.
Update (as per JSFiddle)
It looks like when switching class the height is not recognized in the switched class if no unit is specified .
This happens even without the transition property .
Example does not work -height: 70;
Working example -height: 70px;
source to share
The problem you are facing is CSS transition . When you click the height, it is calculated, but at this point it is 0. After transition it will be 70px. You should get the height after completing the transition.
In this example, the transition duration is set to 0s
.
jQuery('.topics-btn').click(function(){
jQuery('.category-menu-wrap').toggleClass('category-menu-visible');
if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
var menuHeight = jQuery('.category-menu-visible').height();
alert(menuHeight);
jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
} else {
jQuery('.sidebar .content-wrap').css('margin-top', 0);
}
});
.category-menu-wrap {
width:100%;
height:0px;
background-color:#F7D5B6;
overflow: hidden;
transition: height 0s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
height: 70px;
transition: height 0s cubic-bezier(.27,1.76,.95,1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="topics-btn">.topics-btn</button>
<div class="category-menu-wrap"></div>
In this other example, we rely on the transition event to get the height value:
jQuery('.topics-btn').click(function(){
jQuery('.category-menu-wrap').toggleClass('category-menu-visible');
});
jQuery('.category-menu-wrap').on('transitionend',function(){
if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
var menuHeight = jQuery('.category-menu-visible').height();
alert(menuHeight);
jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
} else {
jQuery('.sidebar .content-wrap').css('margin-top', 0);
}
});
.category-menu-wrap {
width:100%;
height:0px;
background-color:#F7D5B6;
overflow: hidden;
transition: height 0.5s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
height: 70px;
transition: height 0.5s cubic-bezier(.27,1.76,.95,1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="topics-btn">.topics-btn</button>
<div class="category-menu-wrap"></div>
source to share