CODEWITHSUNDEEP
javascriptjquerycsstoggletoggleclass
Erwin van Ekeren
Erwin van Ekeren

Reputation: 730

Change (toggle) css when clicked on another div

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' });
});

Upvotes: 1

Views: 1208

Answers (6)

Som
Som

Reputation: 76

Try this code:

$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});

Upvotes: 0

Max Bumaye
Max Bumaye

Reputation: 1009

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

Upvotes: 0

Thomas Bormans
Thomas Bormans

Reputation: 5362

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' });
    }
});

Upvotes: 0

Kurren
Kurren

Reputation: 837

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;
    }
});

Upvotes: 0

Aameer
Aameer

Reputation: 1376

    <style>
      .highlight{
        height: 100%;
      }
    </style>
    $('.show').click(function() { 
        $('#mobile-menu').toggleClass( "highlight" );
    });

Upvotes: 1

Alvin Magalona
Alvin Magalona

Reputation: 771

Try this code.

$(".show").click(function() { 
    if ($('#mobile-menu').css('height') === '100%')
        $('#mobile-menu').css({ 'height': '51px' });
    else
        $('#mobile-menu').css({ 'height': '100%' });
});

Upvotes: 1

Related Questions