Bring a div infront of other divs by clicking a button using javascript?

0
votes

I have 3 divs and 3 buttons. I want a javascript code for , if I click button1 then all the divs should be visible. if I click button2, then div2 should be visible only, and it should be infront of div1 and div3. if I click button3 , then div3 should be visible only , and it should be infront of both div2 and div3.

My code is bellow:

[<html>
<head></head>
<body>
<input type="button" id="button1"  onclick="button1Click();"/>
<input type="button" id="button2" onclick="button2Click();"/>
<input type="button" id="button3" onclick="button3Click();"/>

<div id="id1">
      <input type="checkbox" />
</div>

<div id="id2">
<input type="checkbox" />
</div>

<div id="id3">
<input type="checkbox" />
</div>
 <script type="text/javascript">

        function button1Click() {     
            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");

            DivId1.style.visibility = "visible";
            DivId2.style.visibility = "visible";
            DivId3.style.visibility = "visible";

        }

        function buttonClick2() {
            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");         

            DivId1.style.visibility = "hidden";
            DivId2.style.visibility = "visible";
            DivId3.style.visibility = "hidden";
        }

        function buttonClick3() {

            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");         

            DivId1.style.visibility = "hidden";
            DivId2.style.visibility = "hidden";
            DivId3.style.visibility = "visible";

        }


    </script>
    </body>

    </html>][1]

but this clickevent can only appears or disappers a div but cannot bring a div infront of other divs. As a result there is free space like the second pic infront of the div.

enter image description here

enter image description here

3
javascripthtml
Look into z-index - w3schools.com/cssref/pr_pos_z-index.asp – Nick
can you use jquery? – Mohit Bhardwaj
It's not working. I don't know why. But is there any way, without using z-index? – Sibnz

3 Answers

0
votes

Instead of visibility hidden/visible, you can use display block/none which will not occupy space when the element is hidden. Is this what you are looking for?

function button1Click() {
	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "block";
	DivId2.style.display = "block";
	DivId3.style.display = "block";

}

function buttonClick2() {
	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "none";
	DivId2.style.visibility = "block";
	DivId3.style.display = "none";
}

function buttonClick3() {

	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "none";
	DivId2.style.display = "none";
	DivId3.style.display = "block";
}
<input type="button" id="button1" onclick="button1Click();" />
<input type="button" id="button2" onclick="buttonClick2();" />
<input type="button" id="button3" onclick="buttonClick3();" />

<div id="id1">
	<input type="checkbox" />111
</div>

<div id="id2">
	<input type="checkbox" />222
</div>

<div id="id3">
	<input type="checkbox" />333
</div>
0
votes

You should use DivId.style.display = 'none' to hide and DivId.style.display = 'block' to show.

0
votes

If you can use jQuery, you can use following code. If you cannot use jQuery, you can use JavaScript to use the same approach. Basically, you need to do these things:

  1. Specify (using some attribute) for each button, which target elements should be shown on clicking the button.
  2. Now, add classes or some other distinguishing attribute to the content div's that need to be shown/hidden.
  3. In click event, check which button was clicked, get its target divs, and show them, hiding all others.

$("#links a").on("click", function(e){
  e.preventDefault();
  var targetClass = $(this).data("target");
  
  $("#contents .items").hide();
  $("#contents ." + targetClass).show();
});//#links a click()
#links{
  float: left;
  width: 100px;
}
#links a{
  display: block;
}

#contents{
  float: left;
}
#contents .items{
  background-color: #ddd;
  margin: 1px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
  <a href="#" data-target="items">all</a>  
  <a href="#" data-target="its">its</a>
  <a href="#" data-target="xyz">xyz</a>
</div>

<div id="contents">
  <div class="items">only items</div>
  <div class="items its">its</div>
  <div class="items xyz">xyz</div>
  <div class="items its">its</div>
  <div class="items">none</div>
  <div class="items its xyz">its and xyz both</div>
  <div class="items its">its</div>
</div><!--#contents-->