bootstrap initially collapsed element

Question

I am using the bootstrap template and I would like to change the way the accordion works by default   How can I get the toggle to be closed when page is first seen  upon load      lt div class  accordion-heading  gt       lt a class  accordion-toggle         data-toggle  collapse         data-parent   accordion2         href   collapseOne  gt Open  lt  a gt   lt  div gt   lt div id  collapseOne  class  accordion-body collapse in  gt       lt div class  span6  gt           lt div class  well well-small  gt               lt div class  accordion-toggle  gt                     some text                 lt  div gt           lt  div gt       lt  div gt       lt div class  span2  gt  lt  div gt                               lt  div gt

User · Accepted Answer

When you expand or collapse accordion it just adds/removes a class "in" and sets the height:auto or 0 to the accordion div.

Demo

So in your accordion when you define it just remove "in" class from the div as below. Whenever you expand an accorion it just adds the "in" class to make it visible.

If you render the page with "in" bootstrap looks for the class and it will make the div's height:auto, if it not present it will be at zero height.

<div id="collapseOne" class="accordion-body collapse">

User · Answer

I just added class hide to the div before  card-body  and it hidden by default     lt div id  collapseOne  class  collapse hide  aria-labelledby  headingOne  data-parent   accordion  gt

User · Answer

Just add class  show  to the collapsing element s class  bootstrap will use js dynamically to remove it to collapse and show

User · Answer

need to delete show from class    lt div id  collapseOne  class  collapse show  aria-labelledby  headingOne  data-parent   accordion  gt    It have to be    lt div id  collapseOne  class  collapse  aria-labelledby  headingOne  data-parent   accordion  gt

User · Answer

another solution is to add toggle false to the collapse target  this will stop it randomly opening and closing which happens if you just remove the  in   eg   lt div class  accordion-heading  gt       lt a class  accordion-toggle          data-toggle  collapse          data-parent   accordion2          href   collapseOne  gt Open  lt  a gt   lt  div gt   lt div     id  collapseOne      class  accordion-body collapse      data-toggle  false       gt       lt div class  span6  gt           lt div class  well well-small  gt               lt div class  accordion-toggle  gt                     some text                 lt  div gt           lt  div gt       lt  div gt       lt div class  span2  gt  lt  div gt                               lt  div gt

User · Answer

There is a class in accordian which just adjust height from height auto or 0 to the accordian div   if you remove  in  class and when you click on it  bootstrap adds  in  class again and now content will be visible   lt div id  collapseOne  class  accordion-body collapse  gt        lt  div gt

User · Answer

If removing the in class doesn t work for you  such was my case  you can force the collapsed initial state using the CSS display property        lt div id  collapseOne  class  accordion-body collapse  style  display  none   gt

User · Answer

You need to remove  in  from  collapse in

[html] bootstrap initially collapsed element

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to toggle