Home > DeveloperSection > Forums > How to hide Bootstrap accordion which is not active?
Goti Bandu

Total Post:119

Points:835
Posted on    February-25-2015 4:44 AM

 JavaScript JQuery  Bootstrap 
Ratings:


 1 Reply(s)
 688  View(s)
Rate this:

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:

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

Here is my accordion code:

<div class="container">

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingOne">

                <h4 class="panel-title">

                    <a class="nokia collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Nokia</a>

                </h4>

            </div>

            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

                <div class="panel-body">

                    Nokia mobile is good mobile

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingTwo">

                <h4 class="panel-title">

                    <a class="android collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Android</a>

                </h4>

            </div>

            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                <div class="panel-body">

                    Android is os of mobile.

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingThree">

                <h4 class="panel-title">

                    <a class="iphone collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Iphone</a>

                </h4>

            </div>

            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

                <div class="panel-body">

                    Iphone is very costly phone

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingFour">

                <h4 class="panel-title">

                    <a class="windows collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseOne">Windows</a>

                </h4>

            </div>

            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">

                <div class="panel-body">

Windows is os of mobile and pc

                </div>

            </div>

        </div>

    </div>

</div>

 

How can achive this task.

Thank you in advance.



jayprakash sharma
jayprakash sharma

Total Post:117

Points:821
Posted on    February-25-2015 6:00 AM

You can just try this code according to your accordion code:

 

$(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();

                else if (me[1] === undefined) {

                    $(v).show();

                    console.log($(v));

                }

            });

 

        });

    });


Modified On Mar-15-2016 05:24:28 AM

Don't want to miss updates? Please click the below button!

Follow MindStick