CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Joey
Joey

Reputation: 1876

Bootstrap Accordion without Panel

Is it possible to get the "accordion" feature from Bootstrap without it being a panel? I have some code based on their Collapse/Expand Documentation. I have the following code which uses data-parent which should allow it to work but I can't get it to work like an accordion:

<div id="accordion" role="tablist" aria-multiselectable="true">
    <div class="card">
        <div class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">&nbsp;&nbsp;
                    Bla bla bla bla?
                </a>
            </h5>
        </div>

        <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="card-block">
                bla bla bla
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">&nbsp;&nbsp;
                    bla bla badl bla?
                </a>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="card-block">
                bla bla bla?
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">&nbsp;&nbsp;
                    blablalblalbalbalba?
                </a>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
                BALBL ALBBLAABL BALALABAL BLA!
            </div>
        </div>
    </div>
</div>

Any assistance on a way I can do this or if I am doing something incorrectly?

Upvotes: 1

Views: 2091

Answers (1)

Nasir T
Nasir T

Reputation: 2643

Your missing the bootstrap js file that has the collapse and expand mechanism of the bootstrap according and without which the accordion cannot work. Make sure your adding in the jquery and especially the bootstrap js file right after the bootstrap css file in your page head tag. E.g. with the following links and scripts added for bootstrap and js your code is working just fine.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

Sample: http://codepen.io/Nasir_T/pen/VmPeGy

Upvotes: 2

Related Questions