How can I hide show a div when a button is clicked

Question

I have a div that contains a register wizard  and I need hide show this div when a button is clicked  How can I do this   Below I show you the code   Thanks        lt div id  wizard  class  swMain  gt       lt ul gt         lt li gt  lt a href   step-1  gt               lt label class  stepNumber  gt 1 lt  label gt           lt  a gt  lt  li gt         lt li gt  lt a href   step-2  gt               lt label class  stepNumber  gt 2 lt  label gt           lt  a gt  lt  li gt         lt li gt  lt a href   step-3  gt               lt label class  stepNumber  gt 3 lt  label gt            lt  a gt  lt  li gt         lt li gt  lt a href   step-4  gt               lt label class  stepNumber  gt 4 lt  label gt           lt  a gt  lt  li gt       lt  ul gt       lt div id  step-1  gt            lt h2 class  StepTitle  gt Perfil lt  h2 gt           lt table cellspacing  3  cellpadding  3  align  center  gt               lt tr gt                     lt td align  center  colspan  3  gt  amp nbsp  lt  td gt               lt  tr gt                       lt tr gt                     lt td align  right  gt Username   lt  td gt                     lt td align  left  gt                       lt input type  text  id  username  name  username  value    class  txtBox  gt                     lt  td gt                     lt td align  left  gt  lt span id  msg username  gt  lt  span gt  amp nbsp  lt  td gt               lt  tr gt               lt tr gt                     lt td align  right  gt Password   lt  td gt                     lt td align  left  gt                       lt input type  password  id  password  name  password  value    class  txtBox  gt                     lt  td gt                     lt td align  left  gt  lt span id  msg password  gt  lt  span gt  amp nbsp  lt  td gt               lt  tr gt                                                    lt  table gt                      lt  div gt

User · Answer

The following solution is    briefest  Somewhat similar to here  It s also minimal  The table in the DIV is orthogonal to your question  fastest  getElementById is called once at the outset  This may or may not suit your purposes  It uses pure JavaScript  i e  without JQuery   It uses a button  Your taste may vary  extensible  it s ready to add more DIVs  sharing the code     x000D   x000D  mydiv   document getElementById  showmehideme    x000D   x000D  function showhide d    x000D      d style display    d style display      none      none     block   x000D    x000D   mydiv   background-color   ddd    x000D   lt button id  button  onclick  showhide mydiv   gt Show Hide lt  button gt  x000D   lt div id  showmehideme  gt  x000D      This div will show and hide on button click  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Task can be made simple javascript without jQuery etc    lt script type  text javascript  gt  function showhide     document getElementById  wizard   className    document getElementById  wizard   className   swMain     swHide   swMain     lt  script gt    This function is simple if statement that looks if wizard has class swMain and change class to swHide and else if it s not swMain then change to swMain  This code doesn t support multiple class attributes but in this case it is just enough   Now you have to make css class named swHide that has display  none  Then add on to the button onclick  showhide     So easy it is

User · Answer

This works    x000D   x000D       function showhide id    x000D          var e   document getElementById id   x000D          e style display    e style display     block      none     block   x000D         x000D       lt  DOCTYPE html gt  x000D       lt html gt     x000D       lt body gt  x000D       x000D        lt a href  javascript showhide  uniquename    gt  x000D        Click to show hide  x000D        lt  a gt  x000D       x000D        lt div id  uniquename  style  display none   gt  x000D         lt p gt Content goes here  lt  p gt  x000D        lt  div gt  x000D       x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

This can t be done with just HTML CSS  You need to use javascript here  In jQuery it would be       button   click function e       e preventDefault      to prevent standard click event         wizard   toggle

User · Answer

You can do this entirely with html and css and i have     HTML  First you give the div you wish to hide an ID to target like  view element and a class to target like  hide element  You can if you wish make both of these classes but i don t know if you can make them both IDs  Then have your Show button target your show id and your Hide button target your hide class  That is it for the html the hiding and showing is done in the CSS   CSS The css to show and hide this should look something like this   hide element target       display none      show element target      display block      This should allow you to hide and show elements at will  This should work nicely on spans and divs

User · Answer

Use JQuery  You need to set-up a click event on your button which will toggle the visibility of your wizard div       btn   click function             wizard   toggle          Refer to the JQuery website for more information   This can also be done without JQuery  Using only standard JavaScript    lt script type  text javascript  gt     function toggle visibility id           var e   document getElementById id          if e style display     block             e style display    none          else           e style display    block         lt  script gt    Then add onclick  toggle visibility  id of element to toggle     to the button that is used to show and hide the div

User · Answer

lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Show and hide div with JavaScript lt  title gt   lt script gt       var button beg     lt button id  button  onclick  showhide    gt    button end     lt  button gt        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        lt  script gt   lt  head gt   lt body gt       lt div id  showhide  gt  lt  div gt       lt div id  hide show  gt           lt p gt This div will be show and hide on button click lt  p gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

btn   click function              wizard   toggle            if you want to begin with the div hidden  you should add style  display none    like this    lt div style  display none   gt   lt  div gt

[html] How can I hide/show a div when a button is clicked?

Examples related to html

Examples related to button

Examples related to hide

Examples related to show