Comment puis-je masquer/afficher une div lorsque l'on clique sur un bouton?

J'ai un div qui contient un registre de l'assistant, et j'ai besoin de cacher/montrer ce div quand on clique sur un bouton.
Comment puis-je faire cela?

Ci-dessous, je vous montre le code.

Merci 🙂

  <div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1"> 
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3">&nbsp;</td>
</tr>        
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span>&nbsp;</td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span>&nbsp;</td>
</tr>                                          
</table>               
</div>

double possible de stackoverflow.com/questions/4528085/...

InformationsquelleAutor Julia | 2013-04-30

48

Utiliser JQuery. Vous avez besoin pour mettre en place un événement de clic sur le bouton qui permet de basculer la visibilité de votre assistant div.
```
$('#btn').click(function() {
$('#wizard').toggle();
});
```
Reportez-vous à la JQuery site web pour plus d'informations.

Cela peut aussi être fait sans JQuery. En utilisant uniquement JavaScript standard:
```
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
```
Puis ajouter onclick="toggle_visibility('id_of_element_to_toggle');" pour le bouton qui est utilisé pour afficher et cacher la div.
- Je pense que l'OP est à la recherche d'une solution plus facile que d'avoir à recourir à un tiers (bibliothèque jQuery non balisé). Cela peut être fait sans JQuery.
- Juste une remarque pour l'OP: utilisation visibility: hidden/ visible; lorsque vous ne voulez pas le #assistant div pour libérer de l'espace pour d'autres éléments. Utilisation display: none/ block; si vous voulez le #assistant div être caché avec une taille de marge & rembourrage des propriétés équivalentes à 0 lorsqu'elle est cachée.
InformationsquelleAutor wellers

Cela fonctionne:

JS:

     function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

HTML:

    <!DOCTYPE html>
<html>   
<body>
<a href="javascript:showhide('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
</body>
</html>

Merci pour la simple et efficace solution 🙂

InformationsquelleAutor xpt

6

Cela ne peut être fait avec juste du HTML/CSS. Vous avez besoin d'utiliser le javascript ici. En jQuery, il serait:
```
$('#button').click(function(e){
e.preventDefault(); //to prevent standard click event
$('#wizard').toggle();
});
```
InformationsquelleAutor Jarek Jakubowski

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); //if setup_button is set to 'show' comment this line
}
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>

InformationsquelleAutor dimitryous

2
```
 $('#btn').click(function() {
$('#wizard').toggle(); 
});
```
si vous souhaitez commencer avec la div cachés, vous devez ajouter style="display:none;", comme ceci:
```
<div style="display:none;"> </div>
```
InformationsquelleAutor Jlcanizales
2

La solution suivante est:
- plus brefs. Un peu similaire à ici. C'est aussi minime: La table dans le DIV est orthogonal à votre question.
- plus rapide: getElementById est appelé qu'une seule fois au début. Cela peut ou peut ne pas convenir à vos besoins.
- Il utilise JavaScript (c'est à dire sans JQuery).
- Il utilise un bouton. Votre goût peut varier.
- extensible: il est prêt à ajouter plus de Vrd, de partage du code.
JS:
```
mydiv = document.getElementById("showmehideme");
function showhide(d) {
d.style.display = (d.style.display !== "none") ? "none" : "block";
}
```
CSS:
```
#mydiv { background-color: #ddd; }
```
HTML:
```
<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
This div will show and hide on button click.
</div>
```
- Hmmmm ... TypeError: d est nulle lorsque le bouton est cliqué. Comment pouvons-nous obtenir cet extrait de travailler ?
- Il fonctionne très bien sur Chrome, Firefox et Safari. Quel navigateur utilisez-vous?
- Firefox... Pas à la maison maintenant ... Donc cant commentaire sur la version. Merci d'avoir pris le temps de répondre. Très apprécié.
InformationsquelleAutor Calaf
1

Tâche peut être simple sans javascript jQuery etc.
```
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
```
Cette fonction est simple, si la déclaration qui ressemble si assistant a classe swMain et changement de classe d' swHide et d'autre si ce n'est pas swMain puis changer pour la swMain. Ce code ne prend pas en charge plusieurs attributs de classe, mais dans ce cas, il est juste assez.

Maintenant que vous avez à faire classe css nommé swHide qui a display: none

Puis ajouter sur le bouton onclick="affichermasquer()"

Donc c'est facile.

InformationsquelleAutor JarnoV
1

Vous pouvez le faire entièrement en html et css et je l'ai.

HTML
Tout d'abord vous donner la div que vous souhaitez cacher un ID pour cible comme #view_element et une classe de cible comme #hide_element. Vous pouvez, si vous souhaitez faire de ces deux classes, mais je ne sais pas si vous pouvez faire les deux IDs. Ensuite, demandez à votre bouton Afficher la cible de votre pièce d'identité et votre bouton Masquer votre cible cacher classe. C'est pour le html, le masquage et l'affichage se fait dans le CSS.

CSS
Le css pour afficher et masquer ce qui devrait ressembler à quelque chose comme ceci
```
#hide_element:target {
display:none;
}
.show_element:target{
display:block;
}
```
Cela devrait vous permettre de masquer et d'afficher les éléments à volonté. Cela devrait fonctionner bien sur les travées et les divs.
- J'aime bien, le seul problème est qu'il nécessite l'utilisation d'un ID. Pour moi, c'est problématique parce que j'ai peut-être plusieurs blocs de texte qui sont générées dynamiquement. Pour un simple site html statique si c'est bon.
InformationsquelleAutor Matthew Henson

Vous devez vous connecter pour publier un commentaire.