Solved

Show/hide layers with checkbox

Posted on 2008-06-12
4
262 Views
Last Modified: 2012-05-05
Does anyone know how to adapt the following script so that it works with 2 checkboxes and 2 layers, all hidden until a checkbox is selected.   If the other checkbox is selected the layer should hide,with the other becoming visible.


<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility();" type="checkbox" checked="true" >Show DIV</input>
<br/>
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World!
</div>
 
<script>
 
function ToggleVisibility()
    {
    var objInp = document.getElementById("inp1");
    var objDiv = document.getElementById("div1");
 
    if (objInp.checked) objDiv.style.visibility = ""; else objDiv.style.visibility = "hidden";
    }
 
</script>
 
 
</body>
</html>

Open in new window

0
Comment
Question by:hutmasterx
  • 3
4 Comments
 
LVL 9

Expert Comment

by:zemond
ID: 21768943

<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility('div1', this);" type="checkbox" checked="true" /> Show DIV1
<Br />
<input id="inp1" onclick="ToggleVisibility('div2', this);" type="checkbox" checked="true" /> Show DIV2
<br/>
 
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World1!
</div>
 
 
<div id="div2" style="background-color:#aaaaaa;font-size:20pt;">
Hello World2!
</div>
 
<script>
 
function ToggleVisibility(whichDiv, obj){
    
	
   	if (obj.checked){
 
   		document.getElementById(whichDiv).style.display = "block";
 
	}else{
 
   		document.getElementById(whichDiv).style.display = "none";		
 
	}
 
}
 
</script>
 
 
</body>
</html>

Open in new window

0
 
LVL 9

Accepted Solution

by:
zemond earned 80 total points
ID: 21769003
Code revision
<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility('div1', this);" type="checkbox" checked="true" /> Show DIV1
<Br />
<input id="inp2" onclick="ToggleVisibility('div2', this);" type="checkbox" /> Show DIV2
<br/>
<input id="inp3" onclick="ToggleVisibility('div2', this);" type="checkbox" /> Show DIV3
<br/>
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World1!
</div>
 
<div id="div2" style="background-color:#aaaaaa;font-size:20pt; display:none;">
Hello World2!
</div>
 
<div id="div3" style="background-color:#aaaaaa;font-size:20pt; display:none;">
Hello World3!
</div>
 
<script>
 
function ToggleVisibility(whichDiv, obj){
 
	inp = ['inp1', 'inp2', 'inp3'];
	objs= ['div1', 'div2', 'div3'];
    
	for(i=0; i<inp.length; i++){
 
		if (document.getElementById(inp[i]).id == obj.id){
 
			document.getElementById(whichDiv).style.display = "block";
 
		}else{
 
			document.getElementById(objs[i]).style.display = "none";
			document.getElementById(inp[i]).checked = false;
		
		}
		
 
	}
 
 
}
 
</script>
 
 
</body>
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:zemond
ID: 21769007
If you can only have 1 visible at a time, might be better to use a radio group
0
 

Author Closing Comment

by:hutmasterx
ID: 31466526
Many thanks for your prompt help, worked perfectly.
0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Web forms being filled out by bots 4 37
how can i test my code? 1 42
where is team.js? 3 27
Make Session back to empty 9 16
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question