CODEWITHSUNDEEP
jquerycss
Michael Philibin
Michael Philibin

Reputation: 403

JavaScript/JQuery to bring div to the front of another

I have been searching for some code to bring one div in front of another upon the click of a button.

Here is the HTML code:

<a href="#" class="button">Toggle</a>

<div class="red">
    Red Content
</div>

<div class="blue">
    Blue Content
</div>

and the CSS code:

.red {
position: relative;
top: 100px;
left: 0px;
width: 200px;
height: 100px;
background-color: red;
color: white;
text-align: center;
line-height: 100px;
}

.blue {
position: absolute;
top: 127px;
left: 8px;
width: 200px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}

I cannot figure out how to click the toggle button to have the "red" div appear over the "blue" div. Then upon another click, have the "blue" div appear over the "red" div again.

Here is the jquery code: 

$(".red").click(function(){
$(".red").toggle();
$(".blue").hide();
});

thanks for any and all help!

Upvotes: 2

Views: 873

Answers (1)

emmanuel
emmanuel

Reputation: 9615

One <div> has to be invisible at the starting point and both to be toggled on click.

$(".button").click(function() {
  $(".blue, .red").toggle();
});
.red {
  position: relative;
  top: 100px;
  left: 0px;
  width: 200px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  display:none;
}
.blue {
  position: absolute;
  top: 127px;
  left: 8px;
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" class="button">Toggle</a>

<div class="red">
  Red Content
</div>

<div class="blue">
  Blue Content
</div>

Upvotes: 2

Related Questions