How to change css property on click with jquery?

Question

Looking for some more help with some javascript! I have been messing around with what I already have to try and expand it and I can't get anything to work! Anyways let me explain! There will be a demo below for you to see what I am talking about!

I want to be able to change the background of the black, yellow, or red square when it is clicked and to revert back to the regular image when clicked again and i also want the window that opens to close on the second click also!

Please help! I know that it has to do with using the .css function but i cant figure out how to do it! By the way my current real background image is a sprite so I'm not sure if that will effect anything. Thank you!

Here is some code!

HTML

<div id="sidemenu">
  <div id="home" class="not-open regionsButton">
    <div id="homeTooltip"></div>
  </div>
  <div id="regionsContainer">
    <div id="regionsUnitedStates" class="not-open regionsButton">
      <div id="regionsUnitedStatesTooltip"></div>
    </div>
    <div id="regionsCanada" class="not-open regionsButton">
      <div id="regionsCanadaTooltip"></div>
    </div>
  </div>
  <div id="homeContent" class="regionsContent"></div>
  <div id="regionsUnitedStatesChooseState" class="regionsContent">
    <div id="chooseStateUnitedStatesColumnOne">
      <div id="chooseStateAlabama"></div>
    </div>
  </div>
  <div id="regionsCanadaChooseProvince" class="regionsContent">CDN</div>
</div>
<div id="regionsUnitedStatesAlabamaChooseCity">
  <div id="chooseCityAlabamaAbbeville"></div>
  <div id="chooseCityAlabamaAlabaster"></div>
</div>

CSS

#home{
    width:60px;
    height:60px;
    top:0;
    position:absolute;
    background-color:#ffff00;
}
#homeTooltip {
    opacity:0;
    background-color:#ffff00;
    height:60px;
    width:100px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0px;
    visibility:hidden;
}
#home.not-open:hover #homeTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#home:hover {
    background-position:bottom;
    cursor:pointer;
}
#homeContent {
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 19%;
    background: #505759;
    top:60px;
    z-index:-1;
    opacity:0;
}
#sidemenu {
    width: 60px;
    max-height: 100%;
    min-height: 100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left: -60px;
    transition: left ease-in-out 0.5s;
    top: 0;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 100%;
    min-height: 100%;
    min-width: 60px;
    max-width: 60px;
    max-height: 100%;
    background-color: #383D3F;
    position: absolute;
    top:25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background-color:#111111;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background-color:#000;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsUnitedStates:hover {
    background-position:bottom;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -500px;
    width: 500px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}
#regionsCanada {
    width: 60px;
    height: 60px;
    background-color:#aa0114;
}
#regionsCanadaTooltip {
    opacity:0;
    background-color:#000000;
    height:60px;
    width:120px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:60px;
    visibility:hidden;
}
#regionsCanada.not-open:hover #regionsCanadaTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsCanada:hover {
    background-position:bottom;
}
#regionsCanadaChooseProvince{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -500px;
    width: 500px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
}
#regionsCanadaChooseProvince.show {
    left: 60px;
    z-index:-1;
}
#chooseStateUnitedStatesColumnOne {
    width:150px;
    height:540px;
    float:left;     
}
#chooseStateAlabama {
    width: 150px;
    height:54px;
    background-color:#999999;
    top:0px;
}
#chooseStateAlabama:hover {
    background-color:#999888;   
    cursor:pointer;
}
#regionsUnitedStatesAlabamaChooseCity {
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -750px;
    width: 750px;
    height: 540px;
    background: #505759;
    top: 0px;
    z-index:-1;
}
#regionsUnitedStatesAlabamaChooseCity.show {
    left: 60px;
    z-index:-1;
}
#chooseCityAlabamaAbbeville {
    width: 150px;
    height:54px;
    background-color:#008000;
    top:0px;
}
#chooseCityAlabamaAbbeville:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseCityAlabamaAlabaster {
    width: 150px;
    height:54px;
    background-color:#800080;
    top:54px;
}
#chooseCityAlabamaAlabaster:hover {
    background-position:bottom; 
    cursor:pointer;
}

JAVASCRIPT

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});

JSFIDDLE DEMO

JSFIDDLE

Answer 1

Simply add a class with your new background and toggle it onclick

   $(this).toggleClass('blueBackground');

Same goes for showing/hiding content.

EDIT

Updated fiddle for your comment

Check the Fiddle

Answer 2

You can do it in the following way :

  $("#onclick").click(function() {
        $("#log").css("display", "block");
    }); 

and my #log in CSS :

#log{
    opacity:0.92; 
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
}