javascript - Bootstrap 3 collapse - flicker of hidden content on page load - Stack Overflow

admin管理员组

文章数量:1415476

I am building an admin dashboard with Bootstrap 3, and require a "View More" button to un-collapse some content. This works fine with the following code, however on page load we see the collapse content momentarily whilst the animation takes place.

A fiddle can be found here: /

And I initialise the collapse with the following code:

<script src="//ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".collapse").collapse();
}); 
</script>

Does anyone know how to remove that flicker of un-hidden content?

Note: This question refers to Bootstrap 2, and the problem was never pletely fixed with a correct solution anyway.

I am building an admin dashboard with Bootstrap 3, and require a "View More" button to un-collapse some content. This works fine with the following code, however on page load we see the collapse content momentarily whilst the animation takes place.

A fiddle can be found here: http://jsfiddle/sSNG4/

And I initialise the collapse with the following code:

<script src="//ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".collapse").collapse();
}); 
</script>

Does anyone know how to remove that flicker of un-hidden content?

Note: This question refers to Bootstrap 2, and the problem was never pletely fixed with a correct solution anyway.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Mar 11, 2014 at 14:01 mpdcmpdc 3,57055 gold badges3030 silver badges4949 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

http://getbootstrap./javascript/#collapse-usage

1. In your HTML, change class="collapse in" to class="collapse". The in class indicates that it's "open".
2. Remove the JavaScript pletely. The data- attributes will tell Bootstrap to initialize the collapsible div automatically.

http://jsfiddle/mblase75/YyKhH/

本文标签： javascriptBootstrap 3 collapseflicker of hidden content on page loadStack Overflow