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 · 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 <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) 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 <div> hide using

$(".main-container.collapse").not($(this)).collapse('hide');

when the loaded <div> 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_

$(".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_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>_x000D_
<a href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</a>_x000D_
_x000D_
<div id="Bar" class="main-container collapse in">_x000D_
    This div (#Bar) is shown by default and can toggle_x000D_
</div>_x000D_
<div id="Foo" class="main-container collapse">_x000D_
    This div (#Foo) is hidden by default_x000D_
</div>

_x000D_

User · 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

[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