Tips for updating the color of multiple div elements using the onclick event

Question

Tips for updating the color of multiple div elements using the onclick event

Imagine I have 3 different spans on a page that, when clicked, reveal something. Now, I want to change the color of the selected div.

<div class="step_wrapper">
   <div id="step_box1"> <span>Content for page 1</span>
   </div>
   <div id="step_box2"> <span>Content for page 2</span>
   </div>
   <div id="step_box2"> <span>Content for page 3</span>
   </div>
</div>

I attempted to achieve this by:

 $("#step_box1").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

 For the second div:

$("#step_box2").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

And for the third one:

 $("#step_box3").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

However, what I actually need is to only select one at a time and have the selected one change color while the others revert back to normal.

javascript jquery html css

Answer 1

Answer №1

Before changing one to "red", ensure all are at the default color as shown here:

$('.content_box>div').css("background-color", "")
$(this).css("background-color", "red")

Answer 2

Before changing one to "red", ensure all are at the default color as shown here:

$('.content_box>div').css("background-color", "")
$(this).css("background-color", "red")

Answer 3

Answer №2

To begin with, considering the signature of the toggle() method being used, it seems that an outdated version of jQuery (< 1.9) has been included as this pattern is now deprecated. It is advisable to update jQuery to a more recent version for your project.

Furthermore, you can achieve the desired outcome by implementing a shared event handler on all div elements, similar to the example below:

<div class="step_wrapper">
    <div id="step_box1">
        <span>Content of page 1</span>
    </div>
    <div id="step_box2">
        <span>Content of page 2</span>
    </div>
    <div id="step_box3">
        <span>Content of page 3</span>
    </div>
</div>

$(".step_wrapper div").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

Refer to this fiddle for a working example

It is worth noting the use of addClass()/removeClass(); it is considered good practice to place styles in an external stylesheet and modify the class names of elements rather than directly altering their inline styles.

Answer 4

To begin with, considering the signature of the toggle() method being used, it seems that an outdated version of jQuery (< 1.9) has been included as this pattern is now deprecated. It is advisable to update jQuery to a more recent version for your project.

Furthermore, you can achieve the desired outcome by implementing a shared event handler on all div elements, similar to the example below:

<div class="step_wrapper">
    <div id="step_box1">
        <span>Content of page 1</span>
    </div>
    <div id="step_box2">
        <span>Content of page 2</span>
    </div>
    <div id="step_box3">
        <span>Content of page 3</span>
    </div>
</div>

$(".step_wrapper div").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

Refer to this fiddle for a working example

It is worth noting the use of addClass()/removeClass(); it is considered good practice to place styles in an external stylesheet and modify the class names of elements rather than directly altering their inline styles.

Answer 5

Answer №3

To achieve the desired effect, simply modify the background-color of the chosen step_box, and set all others to have transparent backgrounds:

<div class="step_wrapper">
   <div id="step_box1"> <span>Content of page 1</span>
   </div>
   <div id="step_box2"> <span>Content of page 2</span>
   </div>
   <div id="step_box2"> <span>Content of page 3</span>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$('.step_wrapper > div').click(function() {
$this = $(this);
  
  $this.css('background-color', 'blue');
  $this.siblings().css('background-color', 'transparent');
})  
</script>

Answer 6

To achieve the desired effect, simply modify the background-color of the chosen step_box, and set all others to have transparent backgrounds:

<div class="step_wrapper">
   <div id="step_box1"> <span>Content of page 1</span>
   </div>
   <div id="step_box2"> <span>Content of page 2</span>
   </div>
   <div id="step_box2"> <span>Content of page 3</span>
   </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$('.step_wrapper > div').click(function() {
$this = $(this);
  
  $this.css('background-color', 'blue');
  $this.siblings().css('background-color', 'transparent');
})  
</script>

Answer 7

Answer №4

<head>
    <title>Sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <style>
        .red {
        background-color:red;
        }

    </style>
<script>

    $(document).ready(function () {

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


    });


</script>
</head>
<body>
   <div class="step_wrapper">
   <div id="step_box1"> <span>Content of page 1</span>
   </div>
   <div id="step_box2"> <span>Content of page 2</span>
   </div>
   <div id="Div1"> <span>Content of page 3</span>
   </div>
</div>

</body>
</html>

Answer 8

<head>
    <title>Sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <style>
        .red {
        background-color:red;
        }

    </style>
<script>

    $(document).ready(function () {

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


    });


</script>
</head>
<body>
   <div class="step_wrapper">
   <div id="step_box1"> <span>Content of page 1</span>
   </div>
   <div id="step_box2"> <span>Content of page 2</span>
   </div>
   <div id="Div1"> <span>Content of page 3</span>
   </div>
</div>

</body>
</html>

Answer 9

Answer №5

Easy CSS Trick

All it takes is a few lines of CSS to achieve this effect. Remember to include the tabindex attribute in each DIV so that they can be focused on. No need for any javascript or external libraries with this solution.

Give it a try by running the snippet below and clicking on the lines of text to see the magic happen.

div:not(:focus) { background-color: none; color: black;}
div:focus { background-color: red; color: white;}

<div>
   <div tabindex=1> <span>Content of page 1</span></div>
   <div tabindex=2> <span>Content of page 2</span></div>
   <div tabindex=3> <span>Content of page 3</span></div>
</div>

Answer 10

Easy CSS Trick

All it takes is a few lines of CSS to achieve this effect. Remember to include the tabindex attribute in each DIV so that they can be focused on. No need for any javascript or external libraries with this solution.

Give it a try by running the snippet below and clicking on the lines of text to see the magic happen.

div:not(:focus) { background-color: none; color: black;}
div:focus { background-color: red; color: white;}

<div>
   <div tabindex=1> <span>Content of page 1</span></div>
   <div tabindex=2> <span>Content of page 2</span></div>
   <div tabindex=3> <span>Content of page 3</span></div>
</div>

Tips for updating the color of multiple div elements using the onclick event

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Jquery's Ajax Promise fails to execute

Changing the close button icon in highslide popups

Unresolved Issue: jQuery AJAX Fails to Load PHP File in Internet Explorer

JavaScript - When converting a string to a number, it may result in adding extra 0s at

Adjust the component's onClick property in Next.js

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Updating an image source using JQuery when a button is clicked

Newest preact and typescript packages causing issues with type validation

Enhanced Bootstrap 4 button featuring custom design with text and image aligned on the right side, optimized for flexbox layout

Using jQuery to create dynamic tabbed interfaces

Images on the login page are not being displayed due to CSS urls not functioning properly

The accuracy of dates in javascript may be unreliable

Refreshing issue: Model change in child page not updating view correctly (Ionic & Angular)

Obtaining precise information through clicks using Ionic and Firebase

Issue with NodeJS Express's reverse proxy due to an invalid TLS certificate alternative name

I'm absolutely obsessed with it: Error - unable to switch to an abstract state

Update all field values in Redux-form version 6.0 and above

Is the output of MongoDB's ISODate() function always distinct from that of the Date()

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

Is it possible to identify iOS Safari exclusively without including iOS Chrome, Firefox, and other browsers in the filter?