title: if aria-expanded="true change other element style
body: <p>I have on Bootstrap collapse content, I tried to change the <code>.pannel-heading</code> background when the <code>a[aria-expanded="true]</code> is true. </p>
  
  <p>Also is possible add one more <code>&lt;a&gt;</code> tag in here and won't affect they collapse?</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;div class="panel-title"&gt;
          &lt;h4&gt;title &lt;/h4&gt;
          &lt;button class="button"&gt;Sign up&lt;/button&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#" class="" aria-expanded="true"&gt;sample text&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse-SortTechnician-1" class="panel-collapse collapse in" aria-expanded="true" style=""&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="block1 block constraint-container no-bg "&gt;
            &lt;div class="constrain content-block clearfix"&gt;
              &lt;div class="richtext "&gt;
                &lt;p&gt;sample text&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here's what I tried in jQuery, not working yet.</strong></p>
  
  <pre><code>$(function(){
      if ($('.panel-heading .panel-title &gt; a').attr('aria-expanded') === "false") {
          alert("false");
          $('.panel-title').css('background','#fff');
      } else if($('.panel-heading .panel-title &gt; a').attr('aria-expanded') === "true") {
          $('.panel-title').css('background','#061544');
          alert('true');
      }
  
  })
  </code></pre>
  
  <p>Here's what I tried in CSS, not working yet.</p>
  
  <pre class="lang-css prettyprint-override"><code>.panel-heading a[aria-expanded="true"] ~ .panel-heading{
       background-color: #89c2dc;
       color: #fff;
  }
  </code></pre>