Implementing buttons using css and jQuery

Question

I'm a complete beginner.

I'm trying to implement two buttons that change colors (green to blue) with one click (and once the implementation is completed, integrating it to the actual website).

The buttons need to do the following:

Both the buttons are initially green. Once a button is clicked, it should change its color to blue.
And after that same button is clicked the second time, it should revert back to its original color which is green.
Only one button out of the two can be blue at a time. Which means as soon as the user clicks button-2 after clicking button-1, the button-1 should turn back to green, and button-2 to blue.

So far, I can implement the first and third ones, but not the middle one.

Here are the necessary codes for it:

$(document).ready(function () {

    $('#btn1').click(function(){
        $('.btn').css('background-color', 'green');
        $(this).css('background-color', 'blue');

    })

    $('#btn2').click(function(){
        $('.btn').css('background-color', 'green');
        $(this).css('background-color', 'blue');
    })

  
});

.btn {
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">

    <title>Document</title>
</head>
<body>
    <button id = "btn1" class = "btn">Button</button>
    <button id = "btn2" class = "btn">Button</button>
    <!--<button id = "btn3" class = "btn" onclick="changeColor()">Button</button>
    <button id = "btn4" class = "btn" onclick="changeColor()">Button</button> -->
    <script src="/jquery-3.6.1.min.js"></script>
    <script src="/index.js"></script>
</body>

</html>

You can check if the current button color is green => switch to blue else switch to green. — Neil Nguyen
– Neil Nguyen, Commented Sep 6, 2022 at 9:10

Rory McCrossan · Accepted Answer · 2022-09-06 09:04:29Z

4

To do what you require you can toggle a class on the clicked element which sets its background to blue. At the same time this class will be removed from all other buttons.

The code can also be simplified by using a single event handler bound to all .btn elements, instead of separate ones for each id.

jQuery($ => {
  let $btns = $('.btn').on('click', e => {
    let $btn = $(e.target).toggleClass('clicked');
    $btns.not($btn).removeClass('clicked');
  });
});

.btn {
  background-color: green;
}

.btn.clicked {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">Button</button>
<button class="btn">Button</button>

answered Sep 6, 2022 at 9:04

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Riccardo LV · Accepted Answer · 2022-09-06 13:26:05Z

1

Rory's answer is probably the best, but I think this one is more easy to understand for a beginner (although less elegant):

$('.btn').click(function(){
  if ($(this).hasClass('clicked')) {$(this).removeClass('clicked');}
  else {$('.btn').removeClass('clicked'); $(this).addClass('clicked');}
});

.btn {
  background-color: green;
}

.clicked {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <button class="btn">Button</button>
    <button class="btn">Button</button>

answered Sep 6, 2022 at 13:26

Riccardo LV

1921 silver badge7 bronze badges

Collectives™ on Stack Overflow

Implementing buttons using css and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related