面板不向后切换-引导程序

Question

I just spent 5 hours trying to find the issue and I can't. When I click on the h5 link, it expands as expected showing the < ul > with its < li > items, BUT when I click it again, it doesn't collapse back. I tested it in Safari, Firefox and Chrome, same issue/no difference. I checked the code over and over again and I don't see an issue. I found some jquery fixes on StackOverflow and still the issue remained. I don't know what else to try here. Any body has any ideas what could possibly be wrong?

I am using: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js and http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

Also, all non-bootstrap classes are purely visual (color,background,gradiants, fonts).

<div class="footer-content container text-center">
    <div class="row hideMe2">
        <div class="panel-group" id="collapse11">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" data-parent="collapse" href="#collapse1">LEARN</a>
                    </h5>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link1</a></li>
                        <li><a href="#">Link2</a></li>
                        <li><a href="#">Link3</a></li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse2">ACCOUNT</a>
                    </h5>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">Random1</a></li>
                        <li><a href="#">Random2</a></li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse3">CONNECT</a>
                    </h5>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li>FACEBOOK</li>
                        <li>TWITTER</li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse4">ANIMALS</a>
                    </h5>
                </div>
                <div id="collapse4" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">111</a></li>
                        <li><a href="#">222</a></li>
                        <li><a href="#">333</a></li>
                        <li><a href="#">444</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I reproduced your problem in plunker,

<http://plnkr.co/edit/ZerTE4CyiLefpbypPIBn>

with setup of plunker bootstrap and your example work. Try to include new cdn for scripts or download and import them in the file, I think this is solution for your problem.