Implement jQuery to toggle a class on click for added functionality

Question

Implement jQuery to toggle a class on click for added functionality

I am attempting to create a box that changes color when clicked. When the box is first clicked, it will turn red by adding the class red, and if clicked again, it will change to blue. The colors alternate with each click, but I am unsure of how to achieve this effect.

Code

HTML

<div class='box'></div>

CSS

.box {          
    width: 250px;
    height: 100px;    
    border: 1px #000 solid;
}

.red {
    background: red;
}

.blue {
    background: blue;
}

Javascript

$('div').click(function() {
    $(this).addClass('red');
});

link of jsfiddle

javascript jquery html css

Answer 1

Answer №1

Experiment with toggleClass as shown below:

$('span').click(function() {
    $(this).toggleClass("highlight");
});

To switch between two styles, such as bold and italic, you can do this:

$('span').click(function() {
    $(this).toggleClass("bold italic");
});

Answer 2

Experiment with toggleClass as shown below:

$('span').click(function() {
    $(this).toggleClass("highlight");
});

To switch between two styles, such as bold and italic, you can do this:

$('span').click(function() {
    $(this).toggleClass("bold italic");
});

Answer 3

Answer №2

To transition from white to red, and then red to blue, the toggleClass() method cannot be used. It is necessary to implement some basic conditions to determine which class should be added:

$('div').click(function() {
    var $this = $(this);
    if ($this.hasClass('blue')) {
        $this.removeClass();
    } else if ($this.hasClass('red')) {
        $this.removeClass('red').addClass('blue');
    } else {
        $this.addClass('red');
    }
});

Check out this example on JSFiddle

If you simply need to toggle between the red and blue classes, include one of these classes in the HTML markup so they can be switched easily:

<div class="blue">Hello World!</div>

Then utilize the toggleClass() method:

$('div').click(function() {
    $(this).toggleClass('red blue');
});

View another example on JSFiddle

Answer 4

To transition from white to red, and then red to blue, the toggleClass() method cannot be used. It is necessary to implement some basic conditions to determine which class should be added:

$('div').click(function() {
    var $this = $(this);
    if ($this.hasClass('blue')) {
        $this.removeClass();
    } else if ($this.hasClass('red')) {
        $this.removeClass('red').addClass('blue');
    } else {
        $this.addClass('red');
    }
});

Check out this example on JSFiddle

If you simply need to toggle between the red and blue classes, include one of these classes in the HTML markup so they can be switched easily:

<div class="blue">Hello World!</div>

Then utilize the toggleClass() method:

$('div').click(function() {
    $(this).toggleClass('red blue');
});

View another example on JSFiddle

Answer 5

Answer №3

Utilize the hasClass() method.

.hasClass()

To verify the current class being used, implement code like this:

$('div').click(function() {
    if($('div').hasClass('red')) {       
        $(this).removeClass('red').addClass('blue');
    }
    else{
        $(this).removeClass('blue').addClass('red');
    }
});

Answer 6

Utilize the hasClass() method.

.hasClass()

To verify the current class being used, implement code like this:

$('div').click(function() {
    if($('div').hasClass('red')) {       
        $(this).removeClass('red').addClass('blue');
    }
    else{
        $(this).removeClass('blue').addClass('red');
    }
});

Answer 7

Answer №4

Check out the live demonstration here

  $('div').click(function() {
    if($(this).hasClass('red'))
    {
        $(this).addClass('blue').removeClass('red');
    }
    else
    {
       $(this).addClass('red').removeClass('blue');
    }
  });

Explore this API documentation for more insights on toggleClass

Answer 8

Check out the live demonstration here

  $('div').click(function() {
    if($(this).hasClass('red'))
    {
        $(this).addClass('blue').removeClass('red');
    }
    else
    {
       $(this).addClass('red').removeClass('blue');
    }
  });

Explore this API documentation for more insights on toggleClass

Implement jQuery to toggle a class on click for added functionality

Code

HTML

CSS

Javascript

Answer №1

Answer №2

Check out this example on JSFiddle

View another example on JSFiddle

Answer №3

Answer №4

Similar questions

What is the best way to align flexbox to the left?

Learn the process of utilizing signed URLs in conjunction with ReactJS to securely store files in AWS

When sending an Axios POST request, a "Network Error" message may be received even when the status code is 200 and there is a valid response

Retrieve a specific element from a table using the value of another element as a

Controller receiving null arrays from Ajax post

The Angular7 counterpart of the C# attribute decorator

Error message: 'The menu widget instance does not have a method called 'instance' in Wordpress.'

Difficulty in packaging JavaScript resources within Laravel Project

Obtain the ID of a YouTube video from an iFrame link using jQuery

Angular 8 utilizes JavaScript for its programming language

Unusual shift in the modal's behavior occurs when the parent component's style.transform is applied

Call a function in jQuery from outside

Optimizing performance: Making the most of mongoose updateMany middleware

Attempting to generate a nested array structure in order to produce a JSON object for output

Use Javascript to toggle the display to none for a specific table row (tr)

What is the best way to arrange cards in a specific order with breaks in between each flip

How to make your divs stand out using Bootstrap

Does the Mirage addon work effectively in the ember.js tutorial?

numbered navigation jquery plugin

d3.json is unable to parse a value of 'Infinity