CODEWITHSUNDEEP
javascripttwitter-bootstrap
Santosh
Santosh

Reputation: 23

bootstrap change background color on click

I want to change the background color of the column when it is clicked and revert back to its initial color when another column is clicked on. Please check the code on codepen link.

<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
  <div class="col-sm-5 col4">Open Ended</div>
</a>

http://codepen.io/SantoshNeela/pen/zKYAOa

Upvotes: 1

Views: 3269

Answers (4)

Omar
Omar

Reputation: 527

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js">   </script>
 <div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>

Just add jquery in your head, nothing else

Upvotes: 0

Zenel Rrushi
Zenel Rrushi

Reputation: 2366

First in your codepen you haven't included Jquery. Include it.

Then if you want to change the color of the background you can do it by adding this code

.active div{
  background-color:red!important;
}

the jquery code is ok. 

 $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
.active div{
  background-color:red!important;
}   
.stats-div {
     display: inline-block;
     text-align: center;
     margin-left: 20px;
   }
  
   .stats-div .row .col2 {
     background: grey;
     margin-left: -10px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     padding: 8px;
     font-weight: bold;
     color: white;
   }
   
   .stats-div .row .col3 {
     background: lightgrey;
     padding: 8px;
     font-weight: bold;
     color: black;
     border-right-style: ridge;
   }
   
   .stats-div .row .col4 {
     background: lightgrey;
     padding: 8px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     font-weight: bold;
   }
   
  
   .stats-div .row a,
   a:visited {
     background: lightgrey
   }
   
   a.link {
     background: blue;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stats-div col-sm-6 col-md-6">
  <div class="row">
    <div class="col-sm-2 col2">Type</div>
    <a href="#" class="link">
      <div class="col-sm-5 col3">Close Ended</div>
    </a>
    <a href="#" class="link">
      <div class="col-sm-5 col4">Open Ended</div>
    </a>
  </div>

Upvotes: 1

basil
basil

Reputation: 21

You can find using JavaScript please ref this back ground color changer http://jsfiddle.net/p7w9W/2/

var $p = $("#P44");
$p.stop()
  .css("background-color","yellow")
  .hide(1500, function() {
      $p.css("background-color","red")
        .show(1500);
  });

Upvotes: 0

roberrrt-s
roberrrt-s

Reputation: 8210

$('a.link').click(function(e) {
  $('a.link').each(function(i, el) {
    // Remove existing active classes
    $(el).removeClass('active');
  })
  // Set the new (clicked) class as active.
  $(e.target).addClass('active');
})

Also, don't forget to include jQuery in your codepen.io.

Upvotes: 0

Related Questions