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 acplish 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" href="#msg1"><div class="bg1">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg2">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg3">Hello Earth</div></a>
<a class="show" 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:

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 acplish 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" href="#msg1"><div class="bg1">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg2">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg3">Hello Earth</div></a>
<a class="show" 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

• javascript
• jquery
• html
• css

4 Answers 4

Wele 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" href="#msg1"><div class="bg bg1">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg bg2">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg bg3">Hello Earth</div></a>
<a class="show" 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show" href="#msg1"><div class="bg" backgroundcolor="green">Hello Wolrd</div></a>
<a class="show" href="#msg2"><div class="bg" backgroundcolor="blue">Hello Planet</div></a>
<a class="show" href="#msg3"><div class="bg" backgroundcolor="pink">Hello Earth</div></a>
<a class="show" 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>

You may first add a bg class to every div (bg1, bg2, bg3, bg4):

Then you may use jQuery to toggle the css background:

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

Try setting background-color of elements having class beginning with bg , that are not the currently clicked element , to ""

$("[class^=bg]").click(function() {
    $("[class^=bg]").not(this)
    .css("background-color", "")
})

codepen http://codepen.io/anon/pen/YweZjw

Its a bit long winded as theres better methods of doing it but you can clear the bg color for all divs prior you set the bg color

Jquery

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

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

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

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

function removebkng() {
$('.bg1, .bg2, .bg3, .bg4').css("background-color", "");  
}

Demo

A less code method

add the color you want as a data attribute next to the class eg

<div class="bg1" data-bkng="green">Hello Wolrd</div>

and then you can grab that in the code and set it

$("[class^=bg]").click(function(){
$("[class^=bg]").css("background-color", "");
var bkgcolor = $(this).attr("data-bkng");
$(this).css("background-color", bkgcolor);
});

Demo