Accordion inside Tabs Bootstrap

Question

So I have a tablist on my page, and inside of each tab, I need an accordion as I have a lot of information being outputted to the user. My issue is that when the page loads, the accordions aren't folded up. They're all expanded even though aria-expanded is set to false. When I click on the header to then close the section, it shows the animation it would play as if it was expanding. Click it again, and it closes. here's my test code:

<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#open" aria-controls="open" role="tab" data-toggle="tab">Open Tickets</a></li>
</ul><br>

<!--The Tab Contents-->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="open">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-info">
                <div class="panel-heading" role="tab" id="headingOne">
                    <span>
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Info One</a>
                    </span>
                </div>
                <div id="collapseOne" class="panel-collapse" role="tabpanel" aria-labelledby="headingOne">
                   <div class="panel-body">
                       Content Here
                   </div>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <span>
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Info One</a>
                    </span>
                </div>
                <div id="collapseTwo" class="panel-collapse" role="tabpanel" aria-labelledby="headingTwo">
                   <div class="panel-body">
                       Content Here
                   </div>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading" role="tab" id="headingThree">
                    <span>
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Info One</a>
                    </span>
                </div>
                <div id="collapseThree" class="panel-collapse" role="tabpanel" aria-labelledby="headingThree">
                   <div class="panel-body">
                       Content Here
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>

So is it because it's an accordion nested within a tab Group, or is it something that I'm over looking.

Answer 1

You need to add the .collapse class to the .panel-body's parent div:

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
   <div class="panel-body">
       Content Here
   </div>
</div>

https://jsfiddle.net/p1ft7r7r/