To achieve the desired effect, it is recommended to use the .active class instead of the :active pseudo-class. This ensures that the styling remains applied even after the user releases the mouse button. Targeting the link's parent element with the class .panel-header is the ideal approach:
$('.panel-heading').on('click', function(e) {
$(this).toggleClass('active');
});
To enhance specificity in the CSS, the .panel-heading class has been overridden by doubling it in the selector:
.panel-heading.panel-heading {...
Some Bootstrap classes may not be overridden through cascading priority alone. In such cases, it is recommended to double up on the target class, as demonstrated above, instead of using !important.
Additionally, ensure that the <link> tag is placed within the <head> section and the <script> tag is positioned before the closing </body> tag. Refer to the provided Demo for a visual representation.
Demo
.panel-heading.panel-heading.active {
background: red;
}
.panel-title {
display: inline-block;
width: 100%;
}
.panel-heading.panel-heading.active .panel-title {
color: white;
font-weight: 900;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" class="panel-title" href="#collapse1">Title</a>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$('.panel-heading').on('click', function(e) {
$(this).toggleClass('active');
});
</script>
</body>
</html>