Hide div by default and show it on click with bootstrap

Question

I want to show and hide a div  but I want it to be hidden by default and to be able to show and hide it on click  Here is the code that I have made      lt a class  button  onclick      target   toggle     gt    lt i class  fa fa-level-down  gt  lt  i gt   lt  a gt    lt div id  target  gt    Hello world      lt  div gt

User · Accepted Answer

Just add water  style  display none   to the  lt div gt   Fiddles I say  http   jsfiddle net krY56 13   jQuery    function toggler divId                divId  toggle        Preferred to have a CSS Class  hidden   hidden        display none

User · Answer

Try this one    lt button class  button  onclick      target   toggle     gt      Show Hide  lt  button gt   lt div id  target  style  display  none  gt      Hide show       lt  div gt

User · Answer

Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality    You need to make sure the target div has an ID  Bootstrap has a class  collapse   this will hide your block by default  If you want your div to be collapsible AND be shown by default you need to add  in  class to the collapse  Otherwise the toggle behavior will not work properly  Then  on your hyperlink  also works for buttons   add an href attribute that points to your target div  Finally  add the attribute data-toggle  collapse  to instruct Bootstrap to add an appropriate toggle script to this tag    Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework  up to version 3 4 1     lt a href   Foo  class  btn btn-default  data-toggle  collapse  gt Toggle Foo lt  a gt   lt button href   Bar  class  btn btn-default  data-toggle  collapse  gt Toggle Bar lt  button gt   lt div id  Foo  class  collapse  gt      This div  Foo  is hidden by default  lt  div gt   lt div id  Bar  class  collapse in  gt      This div  Bar  is shown by default and can toggle  lt  div gt

User · Answer

I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of  CowWarrior s answer  I was looking for somewhat similar solution  and after scouring through countless SO question answers and Bootstrap documentations the solution was pretty simple  Again  this would be using inbuilt Bootstrap collapse class to show hide divs and Bootstrap s  Collapse Event     What I realized is that it is easy to do it using a Bootstrap Accordion  but most of the time even though the functionality required is  somewhat  similar to an Accordion  it s different in a way that one would want to show hide  lt div gt  based on  lets say  menu buttons on a navbar  Below is a simple solution to this  The anchor tags   lt a gt   could be navbar items and based on a collapse event the corresponding div will replace the existing div  It looks slightly sloppy in CodeSnippet  but it is pretty close to achieving the functionality-  All that the JavaScript does is makes all the other  lt div gt  hide using       main-container collapse   not   this   collapse  hide      when the loaded  lt div gt  is displayed by checking the Collapse event shown bs collapse  Here s the Bootstrap documentation on Collapse Event   Note  main-container is just a custom class   Here it goes-   x000D   x000D      main-container collapse   on  shown bs collapse   function          x000D    when a collapsed div is shown hide all other collapsible divs that are visible x000D             main-container collapse   not   this   collapse  hide    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt a href   Foo  class  btn btn-default  data-toggle  collapse  gt Toggle Foo lt  a gt  x000D   lt a href   Bar  class  btn btn-default  data-toggle  collapse  gt Toggle Bar lt  a gt  x000D   x000D   lt div id  Bar  class  main-container collapse in  gt  x000D      This div   Bar  is shown by default and can toggle x000D   lt  div gt  x000D   lt div id  Foo  class  main-container collapse  gt  x000D      This div   Foo  is hidden by default x000D   lt  div gt  x000D   x000D   x000D

[javascript] Hide div by default and show it on click with bootstrap

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap