How to make a simple jQuery button that toggles an element's background

Question

I know it probably doesn't get any simpler than this but hey I am a novice. I just want to use the bgtoggle class as a simple change of state button that changes the background color of metro class. I know I am using the wrong approach because what I am trying is not working. Any help is very appreciated! Thanks in advance.

HTML:

<div class="bgtoggle">
</div>

CSS:

.bgtoggle{
    position: absolute;
    width: 56px;
    height: 43px;
    right:65px;
    top:170px;
    color:#fff;
    font-size: 3em;
    cursor:pointer;
    z-index:9999;
    background-image: url("../images/mthc/bgtoggle.png");
    background-size: 100%;
}

.bgtoggle:hover{
    background-image: url("../images/mthc/bgtoggle2.png");
}

And I have this attempt at jQuery which of course is not doing as intended:

$('.bgtoggle').toggle(function () {
    $(".metro").css('background', '#000');
}, function () {
    $(".metro")css('background', '#fff'));
}

That version of jQuery's `toggle()` function was deprecated and removed from jQuery a few years ago — adeneo, Jun 20 '15 at 16:40
↑ ↑ ↑ Use click instead and handle logic inside handler — A. Wolff, Jun 20 '15 at 16:41
You want it to change just for the moment it is clicked, or do you want a permanent state change? If you want it just for the moment, you can just use the :active pseudo class. — jmargolisvt, Jun 20 '15 at 16:46
oooh please exaplin yes i want it to be able to change permenantly until it is clicked again — havingagoatit, Jun 20 '15 at 16:53
possible duplicate of [Click toggle with jQuery](http://stackoverflow.com/questions/1467228/click-toggle-with-jquery) — John Dvorak, Jun 20 '15 at 16:56
@havingagoatit, it is the same principle as in the possible duplicate link, just change the part (for checked ) to what you need. The main idea is to use click instead of toggle — Adib Aroui, Jun 20 '15 at 17:10
possible duplicate of [Toggle class with jQuery](http://stackoverflow.com/questions/8295534/toggle-class-with-jquery) — Scott Sword, Jun 21 '15 at 02:31
Dude a simple google search for "toggling a class with jquery" would give you plenty of examples. This is an old problem that has long been solved and by resorting to asking a stack overflow question you are burning peoples time because this will be flagged as a dupe and closed. The people that answer are trolling for easy points. I'm not saying don't ask questions. Do ask questions. Just put in some effort first. Posting a question on stack overflow should be your last resort. — Scott Sword, Jun 21 '15 at 02:34
it was a last resort and google searches did not return the desired answer, ... you need to READ THE WHOLE PAGE -- answer below is different from suggested duplicates — havingagoatit, Jun 22 '15 at 13:27

AGE · Accepted Answer · 2015-06-20T17:46:55.940

2

I have created a button, based on your CSS (except the background image which I do not have) and made it change the body's background color instead, so as to provide you with a very visual effect. I know you can take this and apply it whichever way you like. One thing to note, I am using the latest jQuery version here, which means that instead of $ you need to use jQuery, that can be changed back if you wish to use an earlier version.

jsFiddle_1

HTML

<div class="bgtoggle"></div>

jQuery

jQuery(document).ready(function(){
    jQuery(".bgtoggle").click(function () {
        jQuery("body").toggleClass("bgcolor--yellow");
    });
});

CSS

body {
    /* set the background to whatever you like, I made it white in color */
    background-color: white;
}

.bgcolor--yellow {
    background-color: yellow;
}

I noted that you had a few syntax errors on your end to begin with (normal if you are a beginner no big deal). Such as not checking for the document (the webpage) to be ready. I also considered that if you want a button, you will want an on click event to represent a button functionality.

If you really wanted to achieve this via hover, then use mouseover/mouseout instead:

jsFiddle_2

jQuery(document).ready(function(){
    jQuery(".bgtoggle").mouseover(function () {
        jQuery("body").css("background-color", "yellow");
    });
    jQuery(".bgtoggle").mouseout(function () {
        jQuery("body").css("background-color", "white");
    });
});

edited Jun 20 '15 at 17:46

answered Jun 20 '15 at 17:13

AGE

3,752
3
38
60

Thanks for the response... the first example is kinda what I am looking for but you can only do the change once to yellow... i want to be able to turn the yellow on and off whenever i click... I have a url background img for one state and yellow for the other for example – havingagoatit Jun 20 '15 at 17:23
1

that sounds doable, let me modify the fiddle for you, stand by :) – AGE Jun 20 '15 at 17:41
thanks AGE you are the only one that seems to understand what i am trying to do – havingagoatit Jun 20 '15 at 17:46
1

that's because people are trying to help, but they aren't putting the effort to explain, if they did I bet they would have given you similar answers to what I made. – AGE Jun 20 '15 at 17:47
2

yes i think you are right , it is a shame as I am sure they are capable , perhaps a good teacher knows things, a great teacher relates information as well as knowing ;) – havingagoatit Jun 20 '15 at 17:49
1

very well said mate, let me now if this helped you and if it did (better than anyone else) accept it for the future generations to follow – AGE Jun 20 '15 at 17:50
yes it certainly worked on the jsfiddle and putting the code in I am now changing the class body to .metro and the toggle class to a background color from the original url img used and hoepfully it will change between those two things , an image and a color on click every time – havingagoatit Jun 20 '15 at 17:51
having a bit of trouble as I am changing from a normal bg color to the img url that was stored in .metro (body) in the first place ... going to try a couple of things first – havingagoatit Jun 20 '15 at 17:59
1

no problem! I thought I might comment by saying, you need to change background-color to background, then specify background: url("....") for your initial image, then change it to background: "yellow" or something to your needs for the click event. Glad to know this worked for you – AGE Jun 20 '15 at 18:03

score 0 · Answer 2 · answered Jun 21 '15 at 02:01

I think you are asking about How to make a toggle button using jQuery and It perform action whenever toggle event takes place, take a look at the code below.

<html>
<head>
<title>Toggle Button using Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="font-family:arial,sans-serif;font-weight:bold;font-size:.9em;">
<center>
<div class="metro" style="width:100;height:100;background-color: rgb(255,  255, 255);">To change Me</div>
<div class="bgtoggle" style="width:100;height:100;cursor:pointer;">Click Here</div>
<script>

$('.bgtoggle').click(function() {
   if ($('.metro').css('background-color')=="rgb(255, 255, 255)"){
       $('.metro').css('background-color', '#000');
   } else if ($('.metro').css('background-color')=="rgb(0, 0, 0)"){
       $('.metro').css('background-color', 'rgb(255, 255, 255)');
   }
});

</script>
</center>
</body>
</html>

Best of luck for your project!

How to make a simple jQuery button that toggles an element's background

2 Answers2