JasonDahlin.com

Hide/Show Div page content (div, p, input, etc.)

"How do I make items on my page appear or disappear?

Here is an example I wrote for someone working on a "Previous Employer" section of their job application form. They wanted the form to allow for "up to 3" previous employers but did not want all 3 of them to display unless the user requested to "Add Another Previous Employer"

This sample is "dumbed down" (no validation, etc. I put it here as a demonstration of how to dynamically Show content on a page.

First Previous Employer:

Name:

Address:

Add Another Previous Employer

Second Previous Employer:

Name:

Address:

Add Another Previous Employer Remove This Previous Employer

Third Previous Employer:

Name:

Address:

Remove This Previous Employer

Here's how it works:

In HTML, all 3 employer fields exist but two of them are hidden with the CSS.

#wrapper_prev_employer_1, #wrapper_prev_employer_2, #wrapper_prev_employer_3 {width:500px;}
#wrapper_prev_employer_2, #wrapper_prev_employer_3 {display:none;}
.prev_emp_row {float:none;width:500px;margin-bottom: 10px; height:15px;}
.previous_employer_descr {float:left; width:100px;}
.previous_employer_input {float:left; width:400px;}
.previous_employer_addAnother {float:none; width:100%;}

The "Add Another" link calls the javascript function "showEmployer" passing it the ID number of the employer that is to be shown

<a href="javascript:void(0);" onclick="javascript:showEmployer('2');" id="addPrevEmp2">Add Another Previous Employer</a>

The function "showEmployer" sets the display property for the employer being shown to make it no longer hidden and also hides the "Add another" link

function showEmployer(empID) {
var thisEmployer = 'wrapper_prev_employer_' + empID;
     if (document.getElementById(thisEmployer)){
          document.getElementById(thisEmployer).style.display='inline';
          document.getElementById('addPrevEmp' + empID).style.display='none';
     }
}

In addition to the above, I added a "Remove this employer" link (which works, essentially, just like the "add" link, but in reverse).

function removeEmployer(empID) {
     var thisEmployer = 'wrapper_prev_employer_' + empID;
     var thisEmployerName = 'prev_employer_' + empID + '_name';
     var thisEmployerAddress = 'prev_employer_' + empID + '_address';
     document.getElementById(thisEmployerAddress).value = '';
     document.getElementById(thisEmployerName).value = '';
     document.getElementById(thisEmployer).style.display='none';
     document.getElementById('addPrevEmp' + empID).style.display='inline';
}

Hide/Show Div page content (div, p, input, etc.)

Spread the word!