How to hide Bootstrap accordion which is not active?

Here I am using bootstrap accordions, the scenario is like this: when I click on any accordion, the rest of the accordions will get hidden. I am trying to implement this plz help.

I’m using these library:

<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<scriptsrc="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
Here is my accordion code:
<divclass="container">
    <divclass="panel-group"id="accordion"role="tablist"aria-multiselectable="true">
        <divclass="panel panel-default">
            <divclass="panel-heading"role="tab"id="headingOne">
                <h4class="panel-title">
                    <aclass="nokia collapsed"data-toggle="collapse"data-parent="#accordion"href="#collapseOne"aria-expanded="false"aria-controls="collapseOne">Nokia</a>
                </h4>
            </div>
            <divid="collapseOne"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingOne">
                <divclass="panel-body">
                    Nokia mobile is good mobile
                </div>
            </div>
        </div>
        <divclass="panel panel-default">
            <divclass="panel-heading"role="tab"id="headingTwo">
                <h4class="panel-title">
                    <aclass="android collapsed"data-toggle="collapse"data-parent="#accordion"href="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">Android</a>
                </h4>
            </div>
            <divid="collapseTwo"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingTwo">
                <divclass="panel-body">
                    Android is os of mobile.
                </div>
            </div>
        </div>
        <divclass="panel panel-default">
            <divclass="panel-heading"role="tab"id="headingThree">
                <h4class="panel-title">
                    <aclass="iphone collapsed"data-toggle="collapse"data-parent="#accordion"href="#collapseThree"aria-expanded="false"aria-controls="collapseThree">Iphone</a>
                </h4>
            </div>
            <divid="collapseThree"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingThree">
                <divclass="panel-body">
                    Iphone is very costly phone
                </div>
            </div>
        </div>
        <divclass="panel panel-default">
            <divclass="panel-heading"role="tab"id="headingFour">
                <h4class="panel-title">
                    <aclass="windows collapsed"data-toggle="collapse"data-parent="#accordion"href="#collapseFour"aria-expanded="false"aria-controls="collapseOne">Windows</a>
                </h4>
            </div>
            <divid="collapseFour"class="panel-collapse collapse"role="tabpanel"aria-labelledby="headingFour">
                <divclass="panel-body">
Windows is os of mobile and pc
                </div>
            </div>
        </div>
    </div>
</div>

How can achive this task.

Thank you in advance.

$(document).ready(function () {
        $('.collapsed').click(function () {
            var item = $('.panel');
            var me = $(this).attr('class').split(/\s+/);
            console.log(me[0]);
            $.each(item, function (i, v) {
                var aa = $(v).find("a").attr('class').split(/\s+/);

                if (aa[0] != me[0] && me[1]!=undefined)
                    $(v).hide();
                elseif (me[1] ===undefined) {
                    $(v).show();
                    console.log($(v));
                }
            });

        });
    });

forum

How to hide Bootstrap accordion which is not active?

Anonymous User

1 Answers

Liked By