Zebra Zebra - 1 month ago 5
CSS Question

Changing navbar colour in relation to it's slideDown and slideUp state

I want to give blue color to my navbar when the blue div which contains text is in slideDown state - I have it. BUT when I try to give back the background image my navbar had before when it gains slideUp state it 'ignores' me. What should I improve?

$(document).ready(function(){

$('nav li a i:first').on({
click:function(){

$('.forperson1').slideToggle();
var $d=$('.forperson1');
if($d.is(':visible')){
$('nav').css({'background-image':'none',
'background-color':'blue'});

}else if($d.is(':hidden')){

$('nav').css('background-image','url(https://www.paypalobjects.com/webstatic/en_GB/mktg/wright/home/homepage-hero-1x.jpg)');

};



}
})
});


link to my pen on Codepen

Answer Source

Here's a working CodePen:

CSS:

nav.open {
  background-image: none;
  background-color: blue;
}

Javascript:

$(document).ready(function() {

$('nav li a i:first').on('click', function() {

    $('.forperson1').slideToggle();
    $('nav').toggleClass('open');

});

});

https://codepen.io/jonolayton/pen/RZyYvp