bootstrap accordion not working with table inside it

Question

I have three accordions. In one of my accordion I have a table. As the behaviour of bootstrap accordion, only one will open at a time. From the time I put it in the page it was not working accordingly. I spend my whole day finding solution for it and at last I thought of putting question here and while I was writing my question title, I found a suggestion saying accordion problem with datatable. Instantly I commented my table and now accordian work. Does anybody know anything about this as I need to have that table inside my accordion.

here is my html:

<div class="panel-group" id="accordian1">
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseOne">
                                        Cost
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse in">
                                <div class="panel-body" style="text-align:justify;">
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>

                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseTwo">
                                        some text
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body" style="text-align:justify;">

                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>

                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover table-striped">
                                            <thead>
                                                <tr>
                                                    <th>some text</th>
                                                    <th style="width: 171px;">some text</th>
                                                    <th>some text</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some textsome text</td>
                                                    <td>
                                                        <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some textsome text</td>
                                                    <td>some textsome textsome text</td>
                                                </tr>
                                                <tr>
                                                    <td>some text</td>
                                                    <td>some text</td>
                                                    <td>
                                                        <p>some textsome textsome textsome textsome textsome textsome textsome text</p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian1" href="#collapseThree">
                                        Job Prospect
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body" style="text-align:justify;">
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</p>
                                    <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text.</p>

                                    <b>some text bbbbb</b><br />
                                    <p>some textsome textsome textsome textsome textsome text.</p>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

Your code is perfectly working for me. You can try

1. Test by Creating separate file for this having all bootstrap libraries links.
2. Check if there is any Javascript error in your script by installing Firebug in your Mozilla Firefox.

Answer 2

---

Your table works absolutely fine in the accordion! Make sure your jquery and bootstap scripts are loaded correctly