CODEWITHSUNDEEP
javascripthtmlcss
Serhiy
Serhiy

Reputation: 1981

How to change background color when button or div pressed and if pressed another one the first one changes color back?

I have list of buttons (or div):

<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>

I want to have next:

when I press btn1 it's background color changes to white. When I press btn2 - btn2 background color becomes white and btn1 background color changes back to normal.

Upvotes: 1

Views: 2146

Answers (4)

Eria
Eria

Reputation: 3182

Another solution, still using jQuery :

HTML

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

JS

function activate( element ){
    clearAll();
    $( element ).addClass( 'active' );
}

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

https://jsfiddle.net/33eup40e/6/

And a solution using AngularJS :

JS

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

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

HTML

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

https://jsfiddle.net/33eup40e/13/

Upvotes: 2

Tapan Dave
Tapan Dave

Reputation: 37

simply two line of code would work for your problem

$('.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>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

Get your button collections by document.getElementsByClassName and catch click by addEventListener .Also can change css background by 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>

Upvotes: 0

Krzysztof Borowy
Krzysztof Borowy

Reputation: 548

Create a class with background color. Then attach a listener to every div, on click you will add that special class to them. Every time you click div, you need to remove that class from any other div, after that, apply class to selected div.

Upvotes: 0

Related Questions