web-dev-qa-db-fra.com

Comment puis-je masquer / afficher une div quand un bouton est cliqué?

J'ai un div qui contient un assistant de registre et j'ai besoin de masquer/afficher ce div quand un bouton est cliqué. Comment puis-je faire ceci?

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>
htmlbuttonhideshow
31
Julia

Utilisez JQuery. Vous devez configurer un événement de clic sur votre bouton pour que la visibilité de votre assistant soit basculée.

$('#btn').click(function() {
    $('#wizard').toggle();
});

Reportez-vous au site Web JQuery pour plus d'informations.

Cela peut aussi être fait sans JQuery. En utilisant uniquement du 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>

Ajoutez ensuite onclick="toggle_visibility('id_of_element_to_toggle');" au bouton utilisé pour afficher et masquer le div.

48
wellers

Cela marche:

     function showhide(id) {
        var e = document.getElementById(id);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }
    <!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>
16
xpt

Cela ne peut pas être fait uniquement avec HTML/CSS. Vous devez utiliser javascript ici. Dans jQuery ce serait:

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});
6
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>
4
dimitryous

La solution suivante est:

  • le plus bref. Un peu similaire à ici . C'est également minimal: le tableau de la DIV est orthogonal à votre question.
  • le plus rapide: getElementById est appelé une fois au début. Cela peut ou peut ne pas convenir à vos objectifs.
  • Il utilise du JavaScript pur (c'est-à-dire sans JQuery).
  • Il utilise un bouton . Votre goût peut varier.
  • extensible: il est prêt à ajouter plus de DIV, partageant le code.
mydiv = document.getElementById("showmehideme");

function showhide(d) {
    d.style.display = (d.style.display !== "none") ? "none" : "block";
}
#mydiv { background-color: #ddd; }
<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
    This div will show and hide on button click.
</div>
2
Calaf
 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });

si vous voulez commencer avec le div masqué, vous devez ajouter style="display:none;", comme ça:

<div style="display:none;"> </div>
2
Jlcanizales

Vous pouvez le faire entièrement avec HTML et CSS et j'ai.

HTML D'abord, vous indiquez au div que vous souhaitez masquer un ID à cibler comme #view_element et une classe à cibler comme #hide_element. Vous pouvez, si vous le souhaitez, créer ces deux classes, mais je ne sais pas si vous pouvez leur attribuer les deux ID. Ensuite, faites en sorte que votre bouton Afficher cible votre identifiant et votre bouton Masquer votre classe de masquage. C’est tout pour le HTML que le masquage et l’affichage se font en CSS.

CSS Le css à afficher et masquer cela devrait ressembler à ceci

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

Cela devrait vous permettre de cacher et de montrer des éléments à volonté. Cela devrait bien fonctionner sur les travées et les divs.

1
Matthew Henson

La tâche peut être faite en javascript simple sans 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 une instruction qui a l'air si l'assistant a la classe swMain et change la classe en swHide et sinon, si ce n'est pas swMain , changez en swMain . Ce code ne prend pas en charge plusieurs attributs de classe, mais dans ce cas, il suffit.

Maintenant, vous devez créer une classe css nommée swHide qui a display: none

Ajoutez ensuite au bouton onclick = "showhide ()"

Tellement facile.

1
JarnoV