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

Display the size of the data array in VueJS once the data has been retrieved from the API

Setting up angular-cli project for rc5- Step by step guide

Dealing with multiple jQuery ajax requests - strategies for managing them

Interactive search tool for toggling visibility of elements

Conceal form upon submission with jQuery

NodeJS Fork - React each instance a new line is detected from the child process

Heroku-hosted application experiencing issues with loading website content

What is the reason behind HTML comment delimiters failing to function within HTML style tags?

A guide on incorporating text into a file utilizing JSP within HTML

Is there a way to trigger a JavaScript function upon checking a checkbox?

Combining a JavaScript NPM project with Spring Boot Integration

How to handle blank property values in JavaScript objects and convert them to null in an ASP.NET Web API

Looking for a solution to troubleshoot issues with the updateServing function in JavaScript?

Using the KnockOut js script tag does not result in proper application of data binding

What is the best way to filter specific data types when using ngFor in Angular?

Issues with CSS styling are affecting the display of a form

Guide on implementing enums (or const) in VueJS

Designing a unique CSS border for custom list item bullets

Select the radio button by hovering the mouse over it

Generate an HTML dropdown menu based on the item selected from the autocomplete input field