Reset bootstrap extends table incorrectly

Question

I'm trying to make a Bootstrap table that expands rows when I click on the header, and then closes again when you click on the header again.

The code that I have below does what I want it to do BUT, and the collapse and close animation is disabled.

It's a little difficult to explain, but basically the lines seem to expand down about 5 times compared to their original size (the text size is the same, but the lines get huge), and the merged lines seem to occupy half the screen, and then the lines are compressed to their original size, and then the table is displayed correctly. It takes about a second and a half, but it is very obvious and distracting. The width of the table remains unchanged throughout the animation ..... only the height of the rows expands significantly!

I forgot to mention this in Internet Explorer 11. There is no animation at all in Chrome. It just opens and closes. I need him to work on Internet Explorer 11, thanks!

Any ideas please?

<div class="container-fluid">
<div class="row">
    <div class="col-xs-1">
    </div>

    <div class="col-xs-5">
        <div class="row" style="border:0px;">
            <div style="display:inline-block;padding:0px;">
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr data-toggle="collapse" data-target="#CodeNamesTable" style="color:#FFFFFF;background-color:#854864;">
                            <th style="min-width:60px;">Code</th>
                            <th style="min-width:400px;">Name</th>
                        </tr>
                    </thead>
                    <tbody class="collapse" id="CodeNamesTable">
                            <tr>
                                <td>ABC</td>
                                <td>Notes For ABC Stock</td>
                            </tr>
                            <tr>
                                <td>EER</td>
                                <td>Ordinary Enterprise Readouts</td>
                            </tr>
                            <tr>
                                <td>GRT</td>
                                <td>General Resource Target Funds</td>
                            </tr>
                            <tr>
                                <td>KLI</td>
                                <td>KLI Preference Indicators</td>
                            </tr>
                            <tr>
                                <td>WAW</td>
                                <td>Worldwide Administration Window</td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Here is jsfiddle

Answer 1

, jsfiddle jquery, , jquery, - = > http://codepen.io/carlos27/pen/dpdyEb

HTML

<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

CSS

.container {
    width:403px;
    border:1px solid #d3d3d3;
}
.container div {
    width:400px;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

JS

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

jqueryUI = > https://jqueryui.com/accordion/