Showing / Hiding Div Content with JavaScript

Question

I need a little help here. I am trying to show / hide div content on select of a jump menu. I can't seem to get the code to work. Here is my code:

JS:

function toggleOther(chosen){
if (chosen == 'cat') {
  document.getElementById('categories').style.visibility = 'visible';
} else {
  document.getElementById('categories').style.visibility = 'hidden';
  document.myform.other.value = '';
}

And my page:

<td class="formlabel" nowrap="nowrap"><form name="Users">Users:</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" onchange="toggleOther( document.myform.values.options[document.myform.values.selectedIndex ].value );" class="select" >
   <option selected="selected">Choose</option>
   <option>All Users</option>
   <option value="cat">User 1</option>
   <option value="cat">User 2</option>
   <option value="cat">User 3</option>
   <option value="cat">User 4</option>
   <option value="cat">User 5</option>
     </select></td>
<div style="opacity: 0.3; background: #fff; display:none">
<td width="380" valign="top" class="center">
<table width="360" class="imagetable" cellpadding="0" cellspacing="0" id="categories">
   <tr>
     <th colspan="2" nowrap="nowrap" class="reportname">Categories</th>
   </tr>
   <tr>
     <td class="formlabel" nowrap="nowrap"><form name="Exams">Exams</td>
     <td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" class="select">
         <option value="#" selected="selected" target="_blank">Choose</option>
         <option value="">All Exams</option>
         <option value="">Exam 1</option>
         <option value="">Exam 2</option>
         <option value="">Exam 3</option>
         <option value="">Exam 4</option>
         <option value="">Exam 5</option>
        </select></td>
       </tr>
   </form>
       <tr>
        <td nowrap="nowrap" class="formlabel">Include Categories</td>
        <td nowrap="nowrap" class="formlabel"><input type="text" name="textfield2" id="textfield2" class="fields" size="4" />or more items assigned</td>
       </tr>
       <tr>
         <td class="formlabel" nowrap="nowrap">Display Categories</td>
         <td nowrap="nowrap" class="formlabel">that appear 
           <input type="text" name="textfield3" id="textfield3" class="fields" size="4" />or more exams</td>
        </tr>
      </table>

Any help here? I cannot seem to get it to work...

Try using setting the display css attribute to none to hide it and "" to make it visible. — Maz
– Maz, Commented Nov 21, 2012 at 17:16

Martijn Pieters · Accepted Answer · 2012-11-21 17:34:46Z

2

To hide:

document.getElementById('categories').style.display="none"

To show:

document.getElementById('categories').style.display=""

edited Nov 21, 2012 at 17:34

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Nov 21, 2012 at 17:17

Mahmoud Farahat

5,4814 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bakudan · Accepted Answer · 2012-11-21 18:40:14Z

-1

It is better to use the jquery's .toggle() method. You save time and it is nicer since you can do effects

http://api.jquery.com/toggle/

you could just do

$(#categories).toggle(); //to show or hide the id = "categories"

edited Nov 21, 2012 at 18:40

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

answered Nov 21, 2012 at 17:23

Jorge Zuverza

9158 silver badges28 bronze badges

1 Comment

Sebas Over a year ago

-1 for suggesting using a framework for such a simple thing as hidding a div.

Collectives™ on Stack Overflow

Showing / Hiding Div Content with JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related