Sunday, September 18, 2016

Jumpy Accordion (Collapse) in Bootstrap

Today I found out that my bootstrap 4 accordion (collapse) is little bit jumpy at the moment it's hidden. A little research on google took me to this link: https://github.com/twbs/bootstrap/issues/12093. Fortunately, someone pointed out a solution to this problem.

It turns out to be a padding error. The problem is happened when you have padding on the collapse target div.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Accordion Button
  </button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
So, if you want to add some padding at collapsed target,  you should put the CSS code into class "card" (refer to example code above). If you add into class "collapse" instead, you'll have "jumpy" accordion like mine.

Related Articles

3 comments:

  1. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    HTML5 courses in chennai

    ReplyDelete
  2. Thanks for sharing this article which helped me in increasing my knowledge. https://www.technologist360.com/

    ReplyDelete
  3. Thank you very much for your tutorials.
    Anggy Trisnawan, after some research this is what made it work for me with the glyph icons.
    A video tutorial on "Bootstrap 4" helped me a lot!
    Thanks!

    ReplyDelete