[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Show/Hide Div

Posted on 2004-11-30
5
Medium Priority
?
4,370 Views
Last Modified: 2008-01-09
I would like to hide the div onload and show the div only if the user selects 'other' from the Country select list. Would someone please demonstrate how this is done in a function? I'm trying to modify a similar function I use with radio buttons, but this is not working.

Many thanks,
MJ

<tr>
      <th id="row7" scope="row">Country</th>
      <td headers="row7" class="midSize">
            <select id="country" name="country" size="1" title="Select country" onChange="toggle('showhide','none')">
                  <option value="CA" >Canaries</option>
                  <option value="CY" >Cyprus</option>
                  <option value="FR" >France</option>
                  <option value="IN" >India</option>
                  <option value="PT" >Portugal</option>
                  <option value="ES" >Spain</option>
                  <option value="TR" >Turkey</option>
                  <option value="GB"  selected="selected">United Kingdom</option>
                  <option value="US" >United States</option>
                  <option value="other">Other</option>
            </select>
      </td>
</tr>
<div id="showhide">
<tr>
      <th id="row8" scope="row">New Country</th>
      <td headers="row8" class="midSize"><input type="text" name="newcountry" id="newcountry" size="30" maxlength="20" title="New Country" /></td>
</tr>
</div>
0
Comment
Question by:mjacobs2929
5 Comments
 
LVL 5

Accepted Solution

by:
prohacx earned 1000 total points
ID: 12705206
Hi there!

You do not really need this div to show or hide the contents of the TR.

Simply hide the TR when needed:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Show/Hide TR </TITLE>

<script type="text/javascript">

      function toggleCountryInput() {

            if ( document.getElementById("country").options[document.getElementById("country").options.selectedIndex].value == "other" ) {
                  document.getElementById('showhide').style.display = '';
            } else {
                  document.getElementById('showhide').style.display = "none";
            }

      }

</script>

</HEAD>

<BODY onload="document.getElementById('showhide').style.display = 'none';">

<form>

<table>
<tr>
     <th id="row7" scope="row">Country</th>
     <td headers="row7" class="midSize">
          <select id="country" name="country" size="1" title="Select country" onchange="toggleCountryInput();">
               <option value="CA" >Canaries</option>
               <option value="CY" >Cyprus</option>
               <option value="FR" >France</option>
               <option value="IN" >India</option>
               <option value="PT" >Portugal</option>
               <option value="ES" >Spain</option>
               <option value="TR" >Turkey</option>
               <option value="GB"  selected="selected">United Kingdom</option>
               <option value="US" >United States</option>
               <option value="other">Other</option>
          </select>
     </td>
</tr>
<!-- <div id="showhide"> -->
<tr id="showhide">
     <th id="row8" scope="row">New Country</th>
     <td headers="row8" class="midSize"><input type="text" name="newcountry" id="newcountry" size="30" maxlength="20" title="New Country" /></td>
</tr>
<!-- </div> -->
</table>

</form>

</BODY>
</HTML>

If you'd use that div, you'd have to open a new table inside it, because <DIV><tr> is not really legal HTML.

Good luck!
0
 
LVL 5

Expert Comment

by:alambres
ID: 12705353
it will work
document.getElementById('showhide').style.display = '';

but the "correct" (more accurate) syntax is
document.getElementById('showhide').style.display = 'block';

anyway it will work good on IE, but I am not sure if  Mozilla will support the style.display in a <tr>
to get it work in all browsers the div or span where style.display is applied should enclose a <table>

other way is using inline instead of block if you have the span or div inside a <td>

0
 
LVL 25

Expert Comment

by:archrajan
ID: 12705613
for firefox and IE and netscape just do this
document.getElementById('showhide').style.display = ""; // for block
document.getElementById('showhide').style.display = "none" //for none

0
 
LVL 5

Expert Comment

by:prohacx
ID: 12705659
Yep I tested my code and it works in IE6, NN7.1 and Opera 7.23
0
 

Author Comment

by:mjacobs2929
ID: 12705901
Thanks prohacx,

That work great. And you're right - I didn't need the div at all.

Cheers
MJ
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
Suggested Courses

834 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