Dynamic Page Content

Question: I want to know whether it is possible to display and hide a table containing labels and text boxes by clicking radio buttons.

Answer: The following will do what you want in Internet Explorer, Opera, and Netscape 6+. This code does not work with Netscape 4 and all of the page will always be visible in that browser.

Show 1
Show 2
No Show

The code to place the fields in the form is as follows:

<input type="radio" name="show" value="show1"
onclick="toggleField('showone',true);toggleField('showtwo',false)" />Show 1<br />
<input type="radio" name="show" value="show2"
onclick="toggleField('showone',false);toggleField('showtwo',true)" />Show 2<br />
<input type="radio" name="show" value="noshow" checked="checked"
onclick="toggleField('showone',false);toggleField('showtwo',false)" />No Show

The radio buttons call a function to toggle the visibility of a section of the page. The first parameter identifies the section of the page to process and the second parameter is set to true to make the page visible and false to hide it. The function code is as follows:

function toggleField(field,vis) {
var d = findDOM(field,1);
if (vis) {
  d.visibility = 'visible';
} else {
  d.visibility = 'hidden';

The above code uses the Document Object Model detection code.

Finally, we identify the section of the page that is to be made visible and invisible based on the radio button that is selected by surrounding the code with div tags as follows:

<div name="showone" id="showone" style="visibility:hidden"><table class="centre" width="100" border="1"><tr><td class="centre">Show 1</td></tr></table></div>
<div name="showtwo" id="showtwo" style="visibility:hidden">
<table class="centre" width="100" border="5"><tr><td class="centre">Show 2</td></tr></table></div>

Of course we can add as many alternate sections to be displayed as we need and the contents of each section can be whatever we want (I just used two tables for the example). We could also add position:absolute to the style parameter which would stop the browser from leaving space for all of the individual fields and would make them all appear in the same position (in this case you would probably want to make some space on your page where each of the sections is to appear).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow