show/hide 1

1000kisoen · Sep 29, 2004

hi,
via a checkbox I want to show/hide some listbox's
there are 6 listbox's
4 of should be shown if the checkbox is checked
2 should be hidden

when the checkbox is unchecked
the 4 listbox's should be hidden
2 should be shown

with this code I can only show and hide
only 4 listbox's

<script language="JavaScript">

</script>

can someone help me with
coding how I like it

thx. kisoen

cLFlaVA · Sep 29, 2004

Here is a complete sample HTML page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="javascript">
<!--
function show() {
	var c = document.forms['the_form'].elements['the_checkbox'];
	var dS = document.getElementById('the_4');
	var dH = document.getElementById('the_2');
	dS.style.display = 'inline';
	dH.style.display = 'none';
	c.onclick = hide;
}

function hide() {
	var c = document.forms['the_form'].elements['the_checkbox'];
	var dS = document.getElementById('the_4');
	var dH = document.getElementById('the_2');
	dS.style.display = 'none';
	dH.style.display = 'inline';
	c.onclick = show;
}
-->
</script>

</HEAD>

<BODY>
<form name="the_form">
Here is a checkbox: <input type="checkbox" name="the_checkbox" onclick="show();"><br><br>
<div id="the_4" style="display: none;">
<select name="the_sel1"><option>select 1</option></select>
<select name="the_sel2"><option>select 2</option></select>
<select name="the_sel3"><option>select 3</option></select>
<select name="the_sel4"><option>select 4</option></select>
</div>
<div id="the_2" style="display: inline;">
<select name="the_sel5"><option>select 5</option></select>
<select name="the_sel6"><option>select 6</option></select>
</div>
</form>
</BODY>
</HTML>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

TSBenke · Feb 9, 2005

I use "block" for the display attribute instead of "inline" when I want to show an element (except for TR elements). Try that and see if it helps you.

MOrac · Feb 9, 2005

The 'block' / 'inline' question depends on the context of the element being altered, with the sub-argument that browsers still don't implement the model in full accordance with any of the standards definitions. To play by the rules of the standards, however, simply use 'inline' for an inline element - anything for which the following text is supposed to flow - and 'block' for a block element - anything for which the following text is supposed to restart below the element. There is also limited browser support for using the display element to alter the behaviour of elements that normally follow one type of behaviour into following the other form. There is even less support for the later-generation options of 'table' and 'table-cell' as display-behaviours; see the w3.org website for a decent discussion. IE also has its usual idiot-proprietary attempt to derail the standards they allegedly help to set up with 'inline-block'.

In this particular case, 'block' would be correct as div is a block element.

cLFlaVA · Feb 9, 2005

we should dig up some threads from 2003 next.

*cLFlaVA
----------------------------
[tt]0101 is binary code for "supreme programmer of omnipotent power"[/tt] - adam0101
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

show/hide 1

1000kisoen

IS-IT--Management

cLFlaVA

Programmer

TSBenke

Programmer

MOrac

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor