How to toggle CSS using JQuery?

Question

I want to add css that will change every time I click. But I couldn't find anything like this in jquery. How can I do this using jquery?

I want you to click on the background color every time. I know how to do this with toggleClass. But I want to do by adding css. The background turns red when the button is clicked. I want it to change when clicked again. I have to do this using .css, not ToggleClass.

$(function() {
  var a = 0;
  $('.mob-channel-title').click(function() {

    $(".content").css("background", "red");

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mob-channel-title">Click me</div>
<div class="content">Content here</div>

Slight clarification here. Are you looking to change the color between red and the default background color each time? Or are you looking to change it between an array of colors? Or random colors? Or... — Cody Pace
– Cody Pace, Commented Jul 26, 2020 at 6:50

Dacre Denny · Accepted Answer · 2020-07-26 06:41:45Z

3

If I understand correctly, you want to toggle the background between "red" and the default background; in this case, a simple approach would be to replace the a variable with a new background variable that tracks the background state to achieve what you require:

$(function() {
  
  var background;
  
  $('.mob-channel-title').click(function() {

    // Compute next background based on current background
    background = background === "red" ? "" : "red"
    
    // Apply newly updated background to .content
    $(".content").css("background", background);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mob-channel-title">Click me</div>
<div class="content">Content here</div>

answered Jul 26, 2020 at 6:41

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

Comments

mplungjan · Accepted Answer · 2020-07-26 06:37:18Z

1

ToggleClass is the preferred way, but try this

$(function() {
  let a = 0;
  const colors = ["red", "green", "blue"];
  $('.mob-channel-title').on("click", function() {
    $(".content").css("background", colors[a++]);
    if (a >= colors.length) a = 0;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mob-channel-title">Click me</div>
<div class="content">Content here</div>

answered Jul 26, 2020 at 6:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Cody Pace · Accepted Answer · 2020-07-26 06:45:18Z

Wasn't sure if you meant that you wanted the color to toggle from white to red or if you wanted a new color each time. So here's both using .css

$(function() {
  var a = 0;
  $('.mob-channel-title').click(function(e) {
    let color = $(".content").css('background');
    $(".content").css("background", color.includes('rgb(255, 0, 0)') ? 'white' : 'red');

  });
});

$(function() {
  var a = 0;
  $('.random-color').click(function(e) {
    const r = parseInt(Math.random() * 255);
    const g = parseInt(Math.random() * 255);
    const b = parseInt(Math.random() * 255);
    $(".content").css("background", `rgb(${r}, ${g}, ${b})`);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mob-channel-title">Click me</div>
<div class="random-color">Random Color</div>
<div class="content">Content here</div>

Collectives™ on Stack Overflow

How to toggle CSS using JQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related