How to Toggle a div s visibility by using a button click

Question

Below is my javascript code which i used to show a div when clicked on a button    How can I hide it when clicked again  And then on clicking it  div should be visible again    lt script type  text javascript  gt  var  hidediv   null  function showdiv id        if  hidediv           hidediv        var div   document getElementById id       div style display    block        hidediv   function      div style display    none         lt  script gt

User · Answer

jQuery would be the easiest way if you want to use it  but this should work  function showHide        var e   document getElementById  e         if   e style display      none              e style display    none         else           e style display

User · Answer

To switch the display-style between block and none you can do something like this   function toggleDiv id        var div   document getElementById id       div style display   div style display     none     block     none       working demo  http   jsfiddle net BQUyT 2

User · Answer

In case you are interested in a jQuery soluton   This is the HTML   lt a id  button  href     gt Show Hide lt  a gt   lt div id  item  gt Item lt  div gt    This is the jQuery script       button    click function              item    toggle          You can see it working here   http   jsfiddle net BQUyT   If you don t know how to use jQuery  you have to use this line to load the library    lt script src  http   code jquery com jquery-1 10 1 min js  gt  lt  script gt    And then use this line to start    lt script gt    function            code to fire once the library finishes downloading       lt  script gt    So for this case the final code would be this    lt script gt    function              button    click function                  item    toggle                 lt  script gt    Let me know if you need anything else  You can read more about jQuery here  http   jquery com

User · Answer

Bootstrap 4 provides the Collapse component for that  It s using JavaScript behind the scenes  but you don t have to write any JavaScript yourself   This feature works for  lt button gt  and  lt a gt    If you use a  lt button gt   you must set the data-toggle and data-target attributes    lt button type  button  data-toggle  collapse  data-target   collapseExample  gt    Toggle  lt  button gt   lt div class  collapse  id  collapseExample  gt    Lorem ipsum  lt  div gt    If you use a  lt a gt   you must use set href and data-toggle    lt a data-toggle  collapse  href   collapseExample  gt    Toggle  lt  a gt   lt div class  collapse  id  collapseExample  gt    Lorem ipsum  lt  div gt

User · Answer

You can easily do it with jquery toggle  By this toggle or slideToggle you will get nice animation and effect also     x000D   x000D    function    x000D        details content   css  display   none    x000D        myButton   click function    x000D          details content   slideToggle 1000   x000D         x000D     x000D   lt div class  main  gt  x000D       lt h2 class  myButton  style  cursor pointer  gt Click Me lt  h2 gt  x000D       lt div id  details content  gt  x000D           lt h1 gt  Lorem Ipsum is simply dummy text lt  h1 gt   x000D           lt p gt     of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

with JQuery  toggle   you can accomplish it easily        target    toggle

User · Answer

Try following logic    lt script type  text javascript  gt  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            lt  script gt

[javascript] How to Toggle a div's visibility by using a button click

Examples related to javascript

Examples related to css

Examples related to html

Examples related to show-hide