---
title: "How to hide Bootstrap accordion which is not active?"  
description: "How to hide Bootstrap accordion which is not active?"  
author: "Anonymous User"  
published: 2015-02-25  
updated: 2015-02-25  
canonical: https://www.mindstick.com/forum/12980/how-to-hide-bootstrap-accordion-which-is-not-active  
category: "javascript"  
tags: ["jquery", "bootstrap"]  
reading_time: 2 minutes  

---

# How to hide Bootstrap accordion which is not active?

Here I am using [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) accordions, the [scenario](https://yourviews.mindstick.com/view/81221/sports-will-change-the-education-scenario) is like this: when I [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social) on any [accordion](https://www.mindstick.com/blog/626/accordion-using-bootstrap-in-asp-dot-net), the [rest](https://www.mindstick.com/forum/12745/how-do-i-use-webapi-rest-correctly-when-other-params-are-needed) of the accordions will get hidden. I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to implement this plz help.

I’m using these [library](https://www.mindstick.com/forum/34615/software-framework-vs-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](https://answers.mindstick.com/qa/40482/why-was-1968-a-year-of-tension-and-turmoil-list-10-events-1-being-the-best-and-10-the-worst-thank-you-in-advance).

## Replies

### Reply by Anonymous User

**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));                }            });         });    });
```


---

Original Source: https://www.mindstick.com/forum/12980/how-to-hide-bootstrap-accordion-which-is-not-active

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.