/    Sign up×
Community /Pin to ProfileBookmark

Cleaner way to Show/Hide Elements?

Copy linkTweet thisAlerts:
Jul 15.2009

I am having an issue with hiding/showing elements. If you preview my code, you’ll see that, based upon a selection in a drop-down menu, I need certain fields to display. However, some fields are common among the drop-down menu selections…and if you preview it, you’ll see that the elements are not displayed very cleanly- lots of annoying spaces in between fields, etc.

Is there a better way to write this to avoid this problem? I’ve read a bit about DOM and parent containers, but am a JS newbie. Was wondering if something like that would accomplish this to make the page results more cleanly? Or, perhaps something else?

Thanks!

[code=html]
<head>
<title>Project Input</title>
</head>

<body>
<form name=”frmInput” id=”frmInput” method=”post”>

<!– Entry Type –>
<div class=”WebApps”>
<h3><label for=”cboEntryType”>Entry Type</label></h3>
<p>
<select name=”cboEntryType” id=”cboEntryType”>
<option></option>
<option value=”1″>Project</option>
<option value=”2″>Test Initiative</option>
<option value=”3″>Business Initiative</option>
<option value=”4″>Business Enhancement</option>
<option value=”4″>Problem Ticket</option>
</select></p>
</div>

<!– Name –>
<div id=”txtName” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtName”>Name:</label></h4>
</td>
<td>
<p><input type=”text” name=”txtName” id=”txtName” size=”100″ maxlength=”100″ /></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Description –>
<div id=”txtDescription” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtDescription”>Description: &nbsp;</label></h4>
</td>
<td>
<p><textarea name=”textarea” id=”txtProjectDescription” cols=”100″ rows=”5″></textarea></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Merger –>
<div id=”cbMerger” class=”WebApps” style=”display:none”>
<table width=”261″ border=”1″>
<tr>
<td width=”217″>
<h4><label for=”cbMerger”>This is a merger initiative.</label></h4>
</td>
<td width=”57″>
<p><input type=”checkbox” name=”cbMerger” id=”cbMerger” /></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Number –>
<div id=”txtNumber” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtNumber”>Number:</label></h4>
</td>
<td>
<p><input type=”txtNumber” id=”txtNumber” size=”20″ /></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Target Completion Date –>
<div id=”txtTargetCompletionDate” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtTargetCompletionDate”>Target Completion Date:</label></h4>
</td>
<td>
<p><input type=”txtTargetCompletionDate” id=”txtTargetCompletionDate” size=”10″ /></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Owner –>
<div id=”cboOwner” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboOwner”>Owner: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboOwner” id=”cboOwner”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Application –>
<div id=”cboApplication” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboApplication”>Application: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboApplication” id=”cboApplication”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– TIG Application –>
<div id=”cboTIGApplication” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboPriority”>TIG Application: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboTIGApplication” id=”cboTIGApplication”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Priority –>
<div id=”cboPriority” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboPriority”>Priority: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboPriority” id=”cboPriority”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Severity –>
<div id=”cboSeverity” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboSeverity”>Severity: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboSeverity” id=”cboSeverity”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Contact –>
<div id=”cboContact” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”cboContact”>Contact: &nbsp;</label></h4>
</td>
<td>
<p>
<select name=”cboContact” id=”cboContact”>
<option></option>
</select>
</p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– High Level Sizing –>
<div id=”txtSizing” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtSizing”>High Level Sizing: &nbsp;</label></h4>
</td>
<td>
<p><input type=”txtSizing” id=”txtSizing” size=”20″ /></p>
</td>
</tr>
</table>
</div>

<!– Project Manager –>
<div id=”txtPMFirstName” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtPMFirstName”>First Name: &nbsp;</label></h4>
</td>
<td>
<p><input type=”txtPMFirstName” id=”txtPMFirstName” size=”20″ /></p>
</td>
</tr>
</table>
</div>

<p class=”BoxCsubheadersnotes”>&nbsp;</p>

<!– Project Manager –>
<div id=”txtPMLastName” class=”WebApps” style=”display:none”>
<table border=”1″>
<tr>
<td>
<h4><label for=”txtPMLastName”>Last Name: &nbsp;</label></h4>
</td>
<td>
<p><input type=”txtPMLastName” id=”txtPMLastName” size=”20″ /></p>
</td>
</tr>
</table>
</div>

</form>
</body>

<script language=”javascript”>
window.onload = function()
{
(document.getElementById(“cboEntryType”).onchange = displayEntryTypes);
};

function displayEntryTypes()
{
var cboEntryType = (document.getElementById(“cboEntryType”).value);

var txtName = document.getElementById(“txtName”);
var txtNumber = document.getElementById(“txtNumber”);
var txtTargetCompletionDate = document.getElementById(“txtTargetCompletionDate”);
var cboOwner = document.getElementById(“cboOwner”);
var cboContact = document.getElementById(“cboContact”);
var txtDescription = document.getElementById(“txtDescription”);

var txtPMFirstName = document.getElementById(“txtPMFirstName”);
var txtPMLastName = document.getElementById(“txtPMLastName”);
var txtSizing = document.getElementById(“txtSizing”);
var cbMerger = document.getElementById(“cbMerger”);
var cboApplication = document.getElementById(“cboApplication”);
var cboPriority = document.getElementById(“cboPriority”);
var cboTIGApplication = document.getElementById(“cboTIGApplication”);
var cboSeverity = document.getElementById(“cboSeverity”);

txtName.style.display = “none”;
txtNumber.style.display = “none”;
txtTargetCompletionDate.style.display = “none”;
cboOwner.style.display = “none”;
cboContact.style.display = “none”;
txtDescription.style.display = “none”;

txtPMFirstName.style.display = “none”;
txtPMLastName.style.display = “none”;
txtSizing.style.display = “none”;
cbMerger.style.display = “none”;
cboApplication.style.display = “none”;
cboPriority.style.display = “none”;
cboTIGApplication.style.display = “none”;
cboSeverity.style.display = “none”;

if (cboEntryType == “1”) //1 is Project
{
txtName.style.display = “”;
txtNumber.style.display = “”;
txtTargetCompletionDate.style.display = “”;
cboOwner.style.display = “”;
cboContact.style.display = “”;
txtPMFirstName.style.display = “”;
txtPMLastName.style.display = “”;
txtDescription.style.display = “”;
}

if (cboEntryType == “2”) //2 is Test Initiative
{
txtName.style.display = “”;
txtNumber.style.display = “”;
txtTargetCompletionDate.style.display = “”;
cboOwner.style.display = “”;
cboContact.style.display = “”;
txtSizing.style.display = “”;
txtDescription.style.display = “”;
}

if (cboEntryType == “3”) //3 is Business Initiative
{
txtName.style.display = “”;
txtNumber.style.display = “”;
txtTargetCompletionDate.style.display = “”;
cboOwner.style.display = “”;
cboContact.style.display = “”;
txtDescription.style.display = “”;
cbMerger.style.display = “”;
}

if (cboEntryType == “4”) //4 is Business Enhancement
{
txtName.style.display = “”;
txtNumber.style.display = “”;
txtTargetCompletionDate.style.display = “”;
cboOwner.style.display = “”;
cboContact.style.display = “”;
txtDescription.style.display = “”;
cboApplication.style.display = “”;
cboPriority.style.display = “”;
}

if (cboEntryType == “5”) //4 is Problem Ticket
{
txtName.style.display = “”;
txtNumber.style.display = “”;
txtTargetCompletionDate.style.display = “”;
cboOwner.style.display = “”;
cboContact.style.display = “”;
txtDescription.style.display = “”;
cboTIGApplication.style.display = “”;
cboSeverity.style.display = “”;
}

}
</script>

[/code]

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@MalgrimJul 15.2009 — If you don't want vertical spaces, I'd suggest getting rid of all the
&lt;p class="BoxCsubheadersnotes"&gt;&amp;nbsp;&lt;/p&gt;
lines or include them in the <div>s so they are hidden as well and probably adjust the margins of the div elements, if that is not enough.

Anyway, there's nothing wrong with your way to hide and show the elements.
×

Success!

Help @baldwingrand spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...