Can I create a button that once pressed will change the settings of a div class?

Hi,

I am new here. Please excuse me if I don’t make this clear, I am not good at coding.

Let’s say I create a div block, I give it a name like “div class” and I set a new background colour for it like blue. Then I create a button somewhere on the page and I want that button, once pressed, to change the settings from the “div class” in this case to change the background colour from blue to green. Is that possible? I hope you will understand what I want to do. Feel free to ask me if you have any questions. Any help would be appreciated. Thank you!

3 Likes

Hi, at the moment, you cannot trigger css color changes to another element using an interaction, however you can use some code like this in the custom code section:

<script>

$(document).ready(function() {
  $("#button").click(function() {
       $("#target").css("background-color", "red");
    });
  });

</script>

Where #button is the unique ID of the button, and when your button that gets clicked, the element with #target ID is the element you want to change it’s css properties.

I hope this helps !

3 Likes

I’m implementing this technique (except it’s not on a button it’s on a div with an ID) and I would like to turn off the background-color on the second click. How would I write that code?

changing red to none should do the trick on the fill color. The click function should work in either case the #button name is an arbitrary element ID and I think it should be able to be applied to any element you would want to add the click functionality to.

Hi @flipflop335,

Thanks for the update. Could you please send me the id of the button, the id of the target div that will be having the background color, and the what color is the panel when it is not set to off? Cheers, Dave

Hi cyberdave,

Here is my website share link, https://preview.webflow.com/preview/feliciavanevery?preview=9ccd5be6827092c61a8591ef947e6646.

This is how it is supposed to work. As a user I would click on user experience design under projects, the class on that is homeUXHeader and it is an h3. I gave this an ID of #bghover. When someone clicks on this area I need the default background color of teal to change to the dark navy color. I used this code to make that happen,

<script>

$(document).ready(function() {
  $("#bghover").click(function() {
       $("#bghover").css("background-color", "#22222f");
    });
  });

</script>

It works great, but now I need that dark navy color to turn off and default back to teal on the users second click.

Hi @flipflop335, thanks for your update. I noticed that you are using a function now to toggle the color based on the value of the bgHoverColors variable. Do you still need help with this? I was going to suggest something similar like a toggle, but it seems you got it working?

Cheers, Dave

Hi Dave,

Yes I still need help. It works to turn it on but not off. I need it to change color on one click and to go back to the original color on the following click.

-Felicia

Hi @flipflop335, sorry for my late response, thanks for your update. I think I am missing something in the steps to reproduce this. See my video, when I click on the teal column, the color changes, and when I click it again, the color changes back to the darker color. Is this not the correct behavior ?

http://quick.as/0wlWcrpwb

Cheers and looking to hear back from you :slight_smile: Dave :slight_smile:

How can I add a delay to this?
I want it to time up with other interactions.

I mushed a bunch of javascript I found around the internet together and ended up with this:

<script>

$(document).ready(function() {
$("#test").click(function() {

setTimeout(resetCSS, 3000);

function resetCSS() {
    $("#test").css({"background-color":"#FFF"});

}

});
});

</script>

Works :relieved:

Hi, could I use this for changing the colour text on click ( see IMG )

Hey guys,

What about the background on a tab bar? I tried the code from the top of the page but I assume I need something special for the current state.