How to use JavaScript to Alter CSS for Multiple Elements


Tags: javascript,css,twitter-bootstrap,dom

Problem :

I am trying to use JavaScript to change the background color of an element after being selected, and also to make sure that only one element at a time has the particular background color. Once the user selects on a different element I would like the previous element that was selected to be replaced by a different background color. Currently I am only able to toggle individual elements by selecting on EACH element. I need to be able to select on an element and apply the new background color, then have JavaScript change the background color of the previously active element to a different color (one less click).

What I am trying to do is very similar to modern navbars or list items where only one element at a time is “active” and has a background color that is different than the other elements in the same div, row, etc.

Notes about my work I am utilizing bootstrap and have no desire to use jQuery for this particular project.

CSS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            h4 {
                border: 1px solid black;
                border-radius: 8px;
                padding: 10px 2px 10px 2px;
                margin: 20px 20px 0px 20px;
                background-color: #F0F0F0;
                border-color: #F8F8F8;
                color: #505050;
                cursor: pointer;
            }

            .active {
                background-color: #99E6FF;
            }
        </style>
    </head>
</html>

HTML:

<div id="pTwoRowOne">
    <div class="row">
        <div class="col-md-4 row row-centered">
            <h4 id="techBio" class="test">Biology</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techCart" class="test">Cartography</h4>
        </div>
        <div class="col-md-4 row row-centered">
            <h4 id="techChem" class="test">Chemistry</h4>
        </div>
    </div>
</div>

JavaScript:

document.getElementById("techBio").onclick=function() {
    document.getElementById("techBio").classList.toggle('active');
}

document.getElementById("techCart").onclick=function() {
    document.getElementById("techCart").classList.toggle('active');
}

document.getElementById("techChem").onclick=function() {
    document.getElementById("techChem").classList.toggle('active');
}

An example can be seen here: http://jsbin.com/fugogarove/1/edit?html,css,js,output

If clarification is needed let me know.



Solution :

Another similar yet simpler way to do it: jsBin ;)

var H4 = document.getElementsByClassName("test"), act;

[].forEach.call(H4, function(el){
    el.addEventListener("click", function(){
       if(act) act.classList.remove("active");
       return (this.classList.toggle("active"), act=this);
    });
});

    CSS Howto..

    How to select the by CSS?

    show div border when link is clicked

    How to left-align and right-align elements in one row using flexbox?

    How to revise the css transitions with a delay

    How to animate transitions triggered by links

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    how the highlighted text color and background is determined

    How to temporarily add a CSS style?

    CSS flipping animation in IE: Turned side shows mirror content

    How can I use CSS for Vaadin components?

    How to make link color change based on location on page?

    How to enqueue second stylesheet in Wordpress child theme?

    Chrome DevTools Converts All HEX Colors to RGB: how to stop?

    Use CSS to show two div's with background image over a containing div

    How should I handle this CSS Inheritance conundrum?

    How to Change Style of Parent
  • on Hover
  • How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    How to overlap a div to an another div without changing their positions - Css

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    How to get alternate colors div with pure css and with IE 7 support?

    How can I center text on an image using Bootstrap?

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    How to smooth emboss in css

    How to reverse a repeated image on blogger

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How to get a jQuery modal overlay to not push the scrollbar around?

    How to keep line breaks when using .text() method for jQuery?

    How to create a box having border top width more than content at different browser display size?

    how to move css element with scrolling left with Jquery?

    How to have a centered layout with border (background-image), and footer sticked to the bottom?