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

joey rohan · Accepted Answer · 2014-09-07 07:00:13Z

1

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

answered Sep 7, 2014 at 7:00

joey rohan

3,5865 gold badges37 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle_Figueroa Over a year ago

can you edit the example to show how that works with my code?

Kyle_Figueroa Over a year ago

If you go to the jsfiddle demo above you will see a yellow, black, and red square and when you click one of them i want the color to change and to change back when you click it again

Alex Art. · Accepted Answer · 2014-09-07 07:18:43Z

0

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

edited Sep 7, 2014 at 7:18

answered Sep 7, 2014 at 7:12

Alex Art.

8,7813 gold badges32 silver badges50 bronze badges

2 Comments

Kyle_Figueroa Over a year ago

This works but i would also like it to change back to normal if you press another button. So if you press the black button and it turns blue and then press the red button, I want the black button to go back black and the red button to go blue

Kyle_Figueroa Over a year ago

the dedit is closer but now the windows for each button are messed up?

Collectives™ on Stack Overflow

How to change css property on click with jquery?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related