When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});
Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});
<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});
You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});
Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});
What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors
Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
