CODEWITHSUNDEEP
internet-explorertwitter-bootstrap
Mo J. Mughrabi
Mo J. Mughrabi

Reputation: 6997

bootstrap accordian not working with IE

I've been working on a website using bootstrap, I've used the accordion (Collapse) JavaScript feature.

It is working with all browsers except with IE its not.

http://bonanza.mocorner.com/en/success_story/

The above URL, if accessed using FF or Chrome you can see that accordion is working fine. When using IE its not, any ideas? although I did include the following in my HTML header

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Below is my HTML code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
    <meta charset="utf-8">


    <!-- CSS Styling starts here -->
    <link rel="stylesheet" type="text/css" href="/public_assets/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/public_assets/bootstrap/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" type="text/css" href="/public_assets/base.css" />
    <!-- CSS Styling ends here -->

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <!-- JS Starts here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="/public_assets/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="/en/js/common_js.js"></script>
    <script type="text/javascript" src="/public_assets/js/jquery.cookie.js"></script>

    <!-- JS ends here -->


</head>
<body>
..............

        <script>
            $(".collapse").collapse();
        </script>

        <div class="collapse in">
            <div id="accordion-group" class="accordion">





                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a href="#collapse-2" data-parent="#accordion-group" data-toggle="collapse" class="accordion-toggle">
                                Checking Story (published on Sept. 30, 2012, 1:43 p.m.)

                            </a>
                        </div>
                        <div class="accordion-body collapse" id="collapse-2" style="height: 0px;">
                            <div class="accordion-inner">
                                <p><img src="/public_media/success_story/2012/09/30/happyFamily.jpg" class="img-rounded" style="float: left; margin-right: 5px;" /> Checking Story...</p>

                            </div>
                        </div>
                    </div>








                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a href="#collapse-1" data-parent="#accordion-group" data-toggle="collapse" class="accordion-toggle">
                                The story of our lives (published on Sept. 30, 2012, 10:20 a.m.)

                            </a>
                        </div>
                        <div class="accordion-body collapse" id="collapse-1" style="height: 0px;">
                            <div class="accordion-inner">
                                <p><img src="/public_media/success_story/2012/09/30/promo_bts.jpg" class="img-rounded" style="float: left; margin-right: 5px;" /> The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives The story of our lives.</p>

                            </div>
                        </div>
                    </div>





            </div>
        </div>




        </div>
    </div>



</div>
</body>
</html>

Upvotes: 4

Views: 7246

Answers (1)

Miha Rekar
Miha Rekar

Reputation: 1546

It's a 2.1.0 bug, which is resolved in 2.1.1 - you should update your Bootstrap files.

Upvotes: 6

Related Questions