Comment faire passer un div de la visibilité à l'aide d'un clic de bouton

Ci-dessous mon code javascript que j'ai utilisé pour montrer un div quand on clique sur un button.

Comment puis-je cacher lorsque vous cliquez à nouveau? Et ensuite en cliquant sur elle, div devrait être de nouveau visible?

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>

Donnez-moi un instant, je vais vous mettre une démo.
À l'aide de jquery, vous pouvez utiliser la bascule , très simple
merci jack pour l'examen de cette question, prenez votre temps et merci de me donner une réponse... merci encore une fois.
Avez-vous un bouton pour chaque div ?
Votre HTML aidera à comprendre la façon dont vous le souhaitez, sinon, je peux penser de ceci.

OriginalL'auteur user2827600 | 2013-09-29

24

Dans le cas où vous êtes intéressé par un de jQuery soluton:

C'est le HTML
```
<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>
```
C'est le script jQuery
```
$( "#button" ).click(function() {
    $( "#item" ).toggle();
});
```
Vous pouvez le constater ici:

http://jsfiddle.net/BQUyT/

Si vous ne savez pas comment faire pour utiliser jQuery, vous devez utiliser cette ligne pour charger la bibliothèque:
```
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
```
Et ensuite utiliser cette ligne pour commencer:
```
<script>
$(function() {
    //code to fire once the library finishes downloading.
});
</script>
```
Donc, pour ce cas, le code final serait celui-ci:
```
<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>
```
Laissez-moi savoir si vous avez besoin de rien d'autre

Vous pouvez en lire plus à propos de jQuery ici: http://jquery.com/

L'OP n'a pas étiqueté jQuery... alors pourquoi jQuery alors ?
Vrai, mais l'OP a également mentionné qu'il est de nouveau à la programmation en javascript, donc peut-être qu'il ne sait même pas à propos de jQuery, et c'est pourquoi j'ai développé ma réponse avec jQuery installation.
OP mentionné dans son commentaire yes, i can use toggle using jquery but i am not allowed to use jquery, Mr. FaceOfJock.
vraiment ? Je pensais que c'est une forme courte Opposite jusqu'à maintenant, mais qui a appris aujourd'hui, merci.
href="http://meta.stackexchange.com/questions/40353/stack-exchange-glossary-dictionary-of-commonly-used-terms" title="stack exchange glossaire dictionnaire des termes couramment utilisés">meta.stackexchange.com/questions/40353/...

OriginalL'auteur Jan
49

Pour basculer l'affichage de style entre block et none vous pouvez faire quelque chose comme ceci:
```
function toggleDiv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}
```
de travail de démonstration: http://jsfiddle.net/BQUyT/2/

que faire si le style d'affichage pas ajoutés à la DIV d'abord??
ensuite, div.style.display == "none" sera faux et le style sera réglé sur "none"
pour les adeptes, cela signifie "qu'il fonctionne toujours si pas de div.style.afficher d'abord"
fonctionne pour inline-block trop div.style.display = div.style.display == "none" ? "inline-block" : "none";
Remarque: cela ne fonctionne pas sur le premier clic si la div est déjà caché lorsque l'utilisateur charge la page. Pour lutter contre cela, modifiez div.style.display == "none" ? "block" : "none"; à div.style.display == "block" ? "none" : "block";

OriginalL'auteur Gigo
1

Essayer logique suivante:
```
<script type="text/javascript">
function showHideDiv(id) {
    var e = document.getElementById(id);
    if(e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>
```
Cela ne fonctionne pas pour plusieurs divs/boutons
en fait je n'étais pas clair à partir de la question... mais à partir de commentaires maintenant.
modifié à travailler pour plusieurs divs...
Votre plus récente édition qui a causé votre script à briser, pour info. Si c'est null il sera déjà à bloc, et ainsi de casser votre code.

OriginalL'auteur Ahsan Shah
0

avec JQuery .toggle()
vous pouvez réaliser facilement
```
$( ".target" ).toggle();
```
je ne peux pas le voir jQuery tag... pensez-vous?

OriginalL'auteur Sobin Augustine
0

jQuery serait la façon la plus simple si vous voulez l'utiliser, mais cela devrait fonctionner.
```
<script type="text/javascript">
    function showHide(){

        var e = document.getElementById('e');

    if ( e.style.display != 'none' ) {
        e.style.display = 'none';
    }
    else {
        e.style.display = '';
    }

}
</script>
```
que faire si le style d'affichage pas ajoutés à la DIV d'abord??
L'affichage doit être automatiquement bloquer, surtout si vous utilisez un reset css, que je recommande fortement.
non, mon pote, j'ai essayé ton code mais il ne fonctionne pas comme prévu
Vous avez raison, je suis sûr que j'ai été en utilisant ce code quelque part. Donnez-moi une minute, sauf si vous avez déjà votre réponse.
j'ai fourni la solution.

OriginalL'auteur Jacques

Vous devez vous connecter pour publier un commentaire.