if aria-expanded="true change other element style

user_8419800 0
Viewed 13712

I have on Bootstrap collapse content, I tried to change the .pannel-heading background when the a[aria-expanded="true] is true.

Also is possible add one more <a> tag in here and won't affect they collapse?

Here's the HTML

  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <h4>title </h4>
        <button class="button">Sign up</button>
        <a data-toggle="collapse" data-parent="#accordion" href="#" class="" aria-expanded="true">sample text</a>
      </div>
    </div>
    <div id="collapse-SortTechnician-1" class="panel-collapse collapse in" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="block1 block constraint-container no-bg ">
          <div class="constrain content-block clearfix">
            <div class="richtext ">
              <p>sample text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Here's what I tried in jQuery, not working yet.

$(function(){
    if ($('.panel-heading .panel-title > a').attr('aria-expanded') === "false") {
        alert("false");
        $('.panel-title').css('background','#fff');
    } else if($('.panel-heading .panel-title > a').attr('aria-expanded') === "true") {
        $('.panel-title').css('background','#061544');
        alert('true');
    }

})

Here's what I tried in CSS, not working yet.

.panel-heading a[aria-expanded="true"] ~ .panel-heading{
     background-color: #89c2dc;
     color: #fff;
}
bootstrap-4 css html jquery
2 Answers

You can try to add css for [aria-expanded="true"] in your code. I think no need to write jQuery to change background color on collapse. I have used bootstrap 4 collapse for this panel.

a.btn.btn-primary[aria-expanded="true"]{
  background: red !important;
}
.btn.btn-primary,.btn.btn-primary:focus,.btn.btn-primary:active  {
  border:0;
  box-shadow:none;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="mt-2">
    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
    <a class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</a>  
  <div class="row">
    <div class="col-12">
      <div class="collapse multi-collapse" id="multiCollapseExample1">        
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.        
      </div>
    </div>
    <div class="col-12">
      <div class="collapse multi-collapse" id="multiCollapseExample2">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

user_60608490

You can try this to change the title background color

$(document).ready(function () {
    var anchorElement = $(".panel-heading .panel-title > a");
    if (anchorElement.attr("aria-expanded") == "true") {
        $(anchorElement).closest(".panel-title").css("background-color", '#061544')
    } else {
        $(anchorElement).closest(".panel-title").css("background-color", '#ffffff')
    }
});
user_46794480
Related