How to close accordion when another opened?

Question

I have an accordion. It's given in the below fiddle. http://fiddle.jshell.net/7vRV9/

In this case when I click an element group one it will open, after that click element group 2. It also will open. But my requirement is when one is opened, all others should close, if I have several (now only two is there). How to implemement this one?

Answer 1

I have modified your code and made below changes :-

1. Might be id="accordion1" is creating some issue so I renamed this id with customTab and replaced respectively
2. Added < div class="accordion-group"> for better UI

Please test it. If you need further help please update me.

Also you can copy and paste below snippet in JSfiddle and test it :-

<div class="accordion " id="customTab">
        <div class="accordion-group">
            <!-- Element Group Heading -->
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse1"> 
                <b>Element Group 1</b>
                </a>
            </div>
            <!-- Elements -->
            <div id="collapse1" class="accordion-body collapse">
               <!--  -->
                    <div class="accordion" id="accordion1-1">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion1-1" data-target="#collapseOne1-1">
                            <input type="radio" name="optionsCheckboxList" value="1"/>Element One
                            </label>
                        </div>
                        <div id="collapseOne1-1" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
                    <div class="accordion" id="accordion1-2">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion1-2" data-target="#collapseOne1-2">
                            <input type="radio" name="optionsCheckboxList" value="2"/>Element Two
                            </label>
                        </div>
                        <div id="collapseOne1-2" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
            </div>
        </div>

        <div class="accordion-group">
            <!-- Element Group Heading -->
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse2"> 
                <b>Element Group 2</b>
                </a>
            </div>
            <!-- Elements -->
            <div id="collapse2" class="accordion-body collapse">
               <!--  -->
                    <div class="accordion" id="accordion2-1">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion2-1" data-target="#collapseOne2-1">
                            <input type="radio" name="optionsCheckboxList" value="1"/>Element One
                            </label>
                        </div>
                        <div id="collapseOne2-1" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
                    <div class="accordion" id="accordion2-2">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion2-2" data-target="#collapseOne2-2">
                            <input type="radio" name="optionsCheckboxList" value="2"/>Element Two
                            </label>
                        </div>
                        <div id="collapseOne2-2" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
            </div>
        </div>
</div>

Answer 2

I hope this will work for you. Just replace below HTML snippet with your JSFIDDLE HTML. It will start work. Feel free to ask if you have any doubt.

<div class="accordion" id="food-category">
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#indian">Indian Food</div>
    </div>
    <div class="accordion-body collapse" id="indian">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#sea">Sea Food</div>
    </div>
    <div class="accordion-body collapse" id="sea">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#chinese">chinese Food</div>
    </div>
    <div class="accordion-body collapse" id="chinese">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
</div>