Ad

On Click Add And Remove Background Color For Each Div

- 1 answer

Hello I am new to Javascript and Stackoverflow.

I have multiple divs and on click they show and hide. Also on click a background color gets added to the buttons. Theres only one problem. I want it to remove the background color when you click on a different button. How can I accomplish this?

JavaScript

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });
});

$('.bg1').click(function(){
    $(this).css("background-color", "green");
});

$('.bg2').click(function(){
    $(this).css("background-color", "blue");
});

$('.bg3').click(function(){
    $(this).css("background-color", "pink");
});

$('.bg4').click(function(){
    $(this).css("background-color", "yellow");
});

HTML

<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg1"><div class="bg1">Hello Wolrd</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg2"><div class="bg2">Hello Planet</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg3"><div class="bg3">Hello Earth</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg4"><div class="bg4">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

CSS

.msg{
  display:none;
}

Here is a demo of my code: http://codepen.io/anon/pen/RrQpjr

Ad

Answer

Welcome to StackOverflow. There are many many solutions to your problem.

You could tell all the other bg's to remove their backgroundcolor when the click event is ran for one of them. You could for example do this with an additional class bg that you add to all of the bg divs (bg1 - bg4). See working example: http://codepen.io/anon/pen/jWZBpz

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });
});

$('.bg1').click(function(){
    $('.bg:not(.bg1)').css("background-color","");
    $(this).css("background-color", "green");
});

$('.bg2').click(function(){
    $('.bg:not(.bg2)').css("background-color","");
    $(this).css("background-color", "blue");
});

$('.bg3').click(function(){
    $('.bg:not(.bg3)').css("background-color","");
    $(this).css("background-color", "pink");
});

$('.bg4').click(function(){
    $('.bg:not(.bg4)').css("background-color","");
    $(this).css("background-color", "yellow");
});
.msg{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg1"><div class="bg bg1">Hello Wolrd</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg2"><div class="bg bg2">Hello Planet</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg3"><div class="bg bg3">Hello Earth</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg4"><div class="bg bg4">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

Please note, this code is very long for what you're trying to achieve, it can be done with a lot less lines of code, but I'm trying to demonstrate it to you so you understand, without changing too much to your own code.

Here is a nicer, 'cleaner' solution. Feel free to ask any questions if you don't understand how this one works: http://codepen.io/anon/pen/OMQpwm

$(document).ready(function(){

  $("a.show").each(function(){
    var $this = $(this);
      $(this).click(function(){
        $($this.attr('href')).show();
        $('div.msg').not($this.attr('href')).hide();
      });
   });

  $('.bg').click(function(){
    $('.bg').css('background-color','');
    $(this).css('background-color',$(this).attr('backgroundcolor'));  
  });

});
.msg{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg1"><div class="bg" backgroundcolor="green">Hello Wolrd</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg2"><div class="bg" backgroundcolor="blue">Hello Planet</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg3"><div class="bg" backgroundcolor="pink">Hello Earth</div></a>
<a class="show" target="_blank" rel="nofollow noreferrer" href="#msg4"><div class="bg" backgroundcolor="yellow">Hello Everyone</div></a>

<div id="msg1" class="msg">
  <p>World World World World</p>
</div>

<div id="msg2" class="msg">
  <p>Planet Planet Planet Planet</p>
</div>

<div id="msg3" class="msg">
  <p>Earth Earth Earth Earth</p>
</div>

<div id="msg4" class="msg">
  <p>Everyone Everyone Everyone</p>
</div>

Ad
source: stackoverflow.com
Ad