CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anon512
Anon512

Reputation: 51

jQuery change css properties of an element when an element is visible

I want to change the background color and text color of an element in my header when the menu is visible. I want to achieve a continuous menu look. however, i also want the element to go back to it's original style when the menu is hidden. However, my jQuery code does not work. There are no syntax errors but it still doesn't work. I have the code in an if statement. Here's the link to the jsFiddle

http://jsfiddle.net/kamvkg14/2/

Here's the code responsible for the style change

if ($('.account-menu').css('display') != 'none') {
  $('.header_account').css({
    'background-color': 'white',
    'padding-bottom': '16px',
    'color': 'black'
  });
} else {
  $('.header_account').css({
    'background-color': 'yellow',
    'padding-bottom': '0px',
    'color': '#00FFFF'
  });
}

Upvotes: 1

Views: 75

Answers (1)

Lumi Lu
Lumi Lu

Reputation: 3305

can find updated version in FIDDLE

$('.username-menu').hide();
$('.header_user').click(function(e){
  e.stopPropagation();
    if($('.username-menu').is(':hidden')) {
        $('.header_user').css({'background-color': 'yellow'},
                                 {'padding-bottom' : '0px'},
                                 {'color' : '#00FFFF'});
        $('.username-menu').show();
    } else {
        $('.header_user').css({'background-color': 'white'},
                                 {'padding-bottom' : '16px'},
                                 {'color' : 'black'});
        $('.username-menu').hide();
    }    
});

Upvotes: 1

Related Questions