手风琴无法正常启动

Question

I am trying to use bootstrap collapse to create an accordion on a site i am building. I can get each panel to collapse but can't get it to work like an accordion (collapse any other open panels). I have searched on here and found a few posts that suggested adding .panel .panel-group .accordion-group classes. I have done this but still can't get it to work. I suspect it may be something to do with how my divs are laid out but was wondering if any one could help?

HTML code:

<div class="container">
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="accordian-group panel-group" id="accordion">
            <div class="credit-box text-center panel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="credit-title">
                             <h2><span class="title-bold">Bronze</span> | £48.50 (2 Credits)</h2>

                        </div>
                        <div class="credit-summary">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porta purus, vel scelerisque metus. Phasellus tincidunt purus dignissim, mollis massa in, cursus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                        </div>
                        <div class="credit-more  collapse" id="credit-bronze">
                            <p>Maecenas a dictum quam, eget faucibus ex. Donec quis elementum sapien. Nulla mollis finibus velit, et auctor lacus iaculis at. Suspendisse potenti. In viverra nisi tortor.</p>
                            <p>Ut tincidunt odio quis nulla rutrum ullamcorper ac non risus. Vestibulum id malesuada sapien, at hendrerit risus. In dignissim libero non mi facilisis condimentum.</p>
                            <p>n tincidunt dui eget pharetra luctus. Integer eget iaculis nulla. Quisque pretium eu odio nec congue. Pellentesque tempus rutrum eros, vitae rhoncus libero commodo vel.s</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-4">
                        <div class="post-button"> 
                           <a data-toggle="collapse" data-parent="#accordion" href="#credit-bronze">View More</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="post-button"> 
                           <a href="#">Select</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="credit-box text-center panel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="credit-title">
                             <h2><span class="title-bold">Silver</span> | £135 (6 Credits)</h2>

                        </div>
                        <div class="credit-summary">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porta purus, vel scelerisque metus. Phasellus tincidunt purus dignissim, mollis massa in, cursus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                        </div>
                        <div class="credit-more  collapse" id="credit-silver">
                            <p>Maecenas a dictum quam, eget faucibus ex. Donec quis elementum sapien. Nulla mollis finibus velit, et auctor lacus iaculis at. Suspendisse potenti. In viverra nisi tortor.</p>
                            <p>Ut tincidunt odio quis nulla rutrum ullamcorper ac non risus. Vestibulum id malesuada sapien, at hendrerit risus. In dignissim libero non mi facilisis condimentum.</p>
                            <p>n tincidunt dui eget pharetra luctus. Integer eget iaculis nulla. Quisque pretium eu odio nec congue. Pellentesque tempus rutrum eros, vitae rhoncus libero commodo vel.s</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-4">
                        <div class="post-button"> 
                          <a data-toggle="collapse" data-parent="#accordion" href="#credit-silver">View More</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="post-button"> 
                          <a href="#">Select</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS fiddle: https://jsfiddle.net/aybg7qwh/

Answer 1

Try adding this function:

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

Fiddle: https://jsfiddle.net/aybg7qwh/1/