title: Change Background color of Active list item in bootstrap
body: <p>I have  item group list </p>
  
  <pre><code>&lt;div id="MainMenu"&gt;
      &lt;div class="list-group panel"&gt;
          &lt;a href="#why" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu"&gt;Menu 1&lt;/a&gt;
          &lt;div class="collapse" id="why"&gt;
              &lt;a href="" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1"&gt;Menu 1 a&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 1 b&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 1 c&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 1 d&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 1 e&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 1 f&lt;/a&gt;
          &lt;/div&gt;
          &lt;a href="#joinus" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu"&gt;Menu 2&lt;/a&gt;
          &lt;div class="collapse" id="joinus"&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 2 a&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 2 b&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 2 c&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 2 d&lt;/a&gt;
              &lt;a href="" class="list-group-item"&gt;Menu 2 e&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to change background of active list item, I Know how to change background, but I am unable to get which list is active, or inactive by JavaScript, tried lots of solution given on others but didn't woJrk.</p>
  
  <p><a href="http://jsfiddle.net/Taqi_Shah/Ltp9qLox/2/" rel="noreferrer">JsFiddle</a></p>
  
  <p>UPDATE:</p>