What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Question

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Looking to customize a list of buttons or divs in your project? Check out this sample layout:

<button type="button" class="btn" id="btn1">Details1</button>
<button type="button" class="btn" id="btn2">Details2</button>
<button type="button" class="btn" id="btn3">Details3</button>
<button type="button" class="btn" id="btn4">Details4</button>

Here's the idea:

Clicking on btn1 changes its background color to white. Subsequently, clicking on btn2 turns its background color to white while restoring btn1 back to its original color.

javascript html css

Answer 1

Answer №1

Here's an alternative approach that utilizes jQuery:

HTML

<button type="button" class="btn" id="btn1" onClick="toggleActive( this )">Details1</button>
<button type="button" class="btn" id="btn2" onClick="toggleActive( this )">Details2</button>
<button type="button" class="btn" id="btn3" onClick="toggleActive( this )">Details3</button>
<button type="button" class="btn" id="btn4" onClick="toggleActive( this )">Details4</button>

JS

function toggleActive( element ){
    deactivateAll();
    $( element ).addClass( 'active' );
}

function deactivateAll(){
    $( '.btn' ).removeClass( 'active' );
}

Check out the demo here.

Additionally, here's a solution using AngularJS:

JS

angularApp.controller( 'ButtonController', function( $scope ){
  $scope.buttons = [
    { id: 'btn1', value: 'Details1' },
    { id: 'btn2', value: 'Details2' },
    { id: 'btn3', value: 'Details3' },
    { id: 'btn4', value: 'Details4' }
  ]
  $scope.activeBtn = undefined;

  $scope.toggleActive = function( str ){
    $scope.activeBtn = str;
  }
});

HTML

<div ng-controller="ButtonController">
  <button ng-repeat="button in buttons" ng-class="{ 'active' : activeBtn === button.id }"
          ng-click="toggleActive( button.id )" type="button" class="btn" id="{{button.id}}">
    {{button.value}}
  </button>
</div>

View the AngularJS implementation here.

Answer 2

Here's an alternative approach that utilizes jQuery:

HTML

<button type="button" class="btn" id="btn1" onClick="toggleActive( this )">Details1</button>
<button type="button" class="btn" id="btn2" onClick="toggleActive( this )">Details2</button>
<button type="button" class="btn" id="btn3" onClick="toggleActive( this )">Details3</button>
<button type="button" class="btn" id="btn4" onClick="toggleActive( this )">Details4</button>

JS

function toggleActive( element ){
    deactivateAll();
    $( element ).addClass( 'active' );
}

function deactivateAll(){
    $( '.btn' ).removeClass( 'active' );
}

Check out the demo here.

Additionally, here's a solution using AngularJS:

JS

angularApp.controller( 'ButtonController', function( $scope ){
  $scope.buttons = [
    { id: 'btn1', value: 'Details1' },
    { id: 'btn2', value: 'Details2' },
    { id: 'btn3', value: 'Details3' },
    { id: 'btn4', value: 'Details4' }
  ]
  $scope.activeBtn = undefined;

  $scope.toggleActive = function( str ){
    $scope.activeBtn = str;
  }
});

HTML

<div ng-controller="ButtonController">
  <button ng-repeat="button in buttons" ng-class="{ 'active' : activeBtn === button.id }"
          ng-click="toggleActive( button.id )" type="button" class="btn" id="{{button.id}}">
    {{button.value}}
  </button>
</div>

View the AngularJS implementation here.

Answer 3

Answer №2

Develop a CSS style that includes a background color. Afterwards, set up an event listener for each division; when clicked, the unique style should be applied to them. Upon clicking a division, ensure that the style is removed from all other divisions before being added to the selected one.

Answer 4

Develop a CSS style that includes a background color. Afterwards, set up an event listener for each division; when clicked, the unique style should be applied to them. Upon clicking a division, ensure that the style is removed from all other divisions before being added to the selected one.

Answer 5

Answer №3

Obtain your button collections using the document.getElementsByClassName method and capture clicks with the addEventListener function. You can also modify the CSS background by utilizing the element.style.background

<button type="button" class="btn" id="btn1">Details1</button>
<button type="button" class="btn" id="btn2">Details2</button>
<button type="button" class="btn" id="btn3">Details3</button>
<button type="button" class="btn" id="btn4">Details4</button>
<script>
var btn = document.getElementsByClassName("btn");    
 for(var i =0 ; i < btn.length;i++){        
        btn[i].addEventListener("click",function(){
            toggle(this.id);            
        });        
    }
 function toggle(id){
    for(var i =0 ; i < btn.length;i++){
    btn[i].style.background = "";
    }
    document.getElementById(id).style.background = "white";
  }
  </script>

Answer 6

Obtain your button collections using the document.getElementsByClassName method and capture clicks with the addEventListener function. You can also modify the CSS background by utilizing the element.style.background

<button type="button" class="btn" id="btn1">Details1</button>
<button type="button" class="btn" id="btn2">Details2</button>
<button type="button" class="btn" id="btn3">Details3</button>
<button type="button" class="btn" id="btn4">Details4</button>
<script>
var btn = document.getElementsByClassName("btn");    
 for(var i =0 ; i < btn.length;i++){        
        btn[i].addEventListener("click",function(){
            toggle(this.id);            
        });        
    }
 function toggle(id){
    for(var i =0 ; i < btn.length;i++){
    btn[i].style.background = "";
    }
    document.getElementById(id).style.background = "white";
  }
  </script>

Answer 7

Answer №4

It's as simple as two lines of code to solve your issue

$('.btn').click(function() {
    $('.btn').removeClass('active');
    $(this).addClass('active');
});

.btn {
  background-color: lightblue;
  border: none;
  cursor: pointer;
}
.btn.active {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="btn1">Details1</button>
<button type="button" class="btn" id="btn2">Details2</button>
<button type="button" class="btn" id="btn3">Details3</button>
<button type="button" class="btn" id="btn4">Details4</button>

Answer 8

It's as simple as two lines of code to solve your issue

$('.btn').click(function() {
    $('.btn').removeClass('active');
    $(this).addClass('active');
});

.btn {
  background-color: lightblue;
  border: none;
  cursor: pointer;
}
.btn.active {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="btn1">Details1</button>
<button type="button" class="btn" id="btn2">Details2</button>
<button type="button" class="btn" id="btn3">Details3</button>
<button type="button" class="btn" id="btn4">Details4</button>

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The frequency of database updates exceeds expectations - involving vue.js this.$router.push and express operations

Using a JavaScript "for each" loop instead of having several "if

Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Create a box with borders and divisions using HTML

Prevent Child Elements from Overstretching Container with Bootstrap Flex

Is there a way to insert a label directly following a dropdown menu within the same table cell?

Guide on building a personalized button layout in Bootstrap 4

Create a circle-shaped floor in THREE.JS that mimics the appearance of a shadow

Error: The function `this.xhr_.upload.addEventListener` is not supported in Firebase Storage

Issues arise when the Angular controller fails to load

No content sent in the request body while implementing fetch

The voting system will increase or decrease by 1 to 5 during each round

Error: Trying to assign a value to a null property

Python script to extract data from websites containing javascript and script tags

How can Express JS be configured to make URL calls from a local environment?

HTML counterpart to PHP's include for JavaScript components

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

What is the best way to align an equal number of divs in each row?

Conditional jQuery actions based on the selected radio button - utilizing if/else statements

Switching the WordPress dropdown menu from a hover function to a click function