|
|
Showing & hiding div layers on button clicks We can control a layer by connecting it to buttons. We can display or hide the layer by clicking the buttons. To create and manage a layer we will use div tags. By using style property of the page we can control the layer.
We will use one on page style sheet for our div tag by defining its layout properties. We will keep this style definition inside our head tags. For more details on Style property visit our CSS section.
We will use one JavaScript function to manage the property of the div tag identified by its id.
Here is a the demo of show hide layer
Here is the code
<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
div {
position: absolute;
left: 100px;
top: 200px;
background-color: #f1f1f1;
width: 180px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body >
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
</body>
</html>
Using one single button to show or hide the message layer
The above code will display two buttons one of showing the layer and other for hiding the layer. We can combine the functionality of these two buttons to one and keep one button which can be toggled to show or hide layer. The caption displayed over the button can be changed by using value property of the button id. We will change this data also and display the appropriate label to give the message.
document.getElementById('bt1').value = 'Hide Layer';
By this we can change the text written over the button
We can manage the display of layer by this .
document.getElementById(id).style.display = 'none'; // To hide the layer
document.getElementById(id).style.display = 'inline'; // To display the layer
Here is the demo of controlling the display of layer by using single button
Here is the code of above demo
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Demo for showing and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Demo Show layer, Demo hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
</head>
<body>
<input type=button name=type id='bt1' value='Show Layer' onclick="setVisibility('sub3');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
| |
| | Joe | 08-06-2010 |
|---|
| Thank you so much. This is exactly the script I needed =) | | Geek | 14-12-2010 |
|---|
| Thank you so much. This is exactly the script I needed =) | | Tavy1884 | 05-05-2011 |
|---|
| Thank you. This is simple and effective. | | Tapash | 13-05-2011 |
|---|
| this example is very simple to understand.Thank you | | platnm | 04-07-2011 |
|---|
| is there a way to make it so they can click the same link/button to hide or show it? | | smo | 05-09-2011 |
|---|
| Yes, it is added now. Check the demo to see how single button is used to display and hide a layer | | Natalie | 22-11-2011 |
|---|
| When you use more than one of these on a page, and have one open, you have to double click to open a second one. Is there a way to fix this so you only need to click once? | | Mark Jacobs | 29-11-2011 |
|---|
| Thank you so much..saved me a lot of time. A little tinkering and I have a show/hide one the company intranet home page... |
|
|
|
|
|
|
