Affichage/masquage du contenu Div avec JavaScript

J'ai besoin d'un peu d'aide ici. J'essaie d'afficher/masquer le contenu div sur un menu de sélection. Je n'arrive pas à faire fonctionner le code. Voici mon code:Affichage/masquage du contenu Div avec JavaScript

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>

Toute aide ici? Je ne peux pas l'air de faire fonctionner ...

Source

2012-11-21 boy

Essayez d'utiliser l'attribut 'mettre display' css à' none' de le cacher et ' » "' pour le rendre visible. – Maz

Quel élément a id ** catégories **? –

Pour masquer:

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

Pour afficher: Méthode

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

Source

2012-11-21 17:17:42

Cela a bien fonctionné. Je vous remercie! – boy

heureux d'aider :) –

-1

Il est préférable d'utiliser la .toggle du jquery(). Vous gagnez du temps et il est plus agréable puisque vous pouvez faire des effets

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

vous pouvez simplement faire

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

Source

2012-11-21 17:23:30

Merci! Je vais vérifier cela! – boy

-1 pour avoir suggéré d'utiliser un framework pour une chose aussi simple que de cacher une div. – Sebas

Affichage/masquage du contenu Div avec JavaScript

Répondre

Questions connexes