becca becca - 6 months ago 21
CSS Question

How to add an 'on-click' background change

I am basically using this - http://jsfiddle.net/navjottomer/8u57u/4/ and also using Bootstrap's panel styles.

I want it to look more like this though - https://support.google.com/mail#topic=

I have no idea where to start in terms of changing the colour of the panel-heading on open / active / expanded. You can see in the example that it starts white, and changes to dark grey on expand.

Any info would be great!

Here's my current mock up:

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-plus text-primary"></i> Overview</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
content here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">Contents panel 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
</div>

TOM TOM
Answer

Here is full code.

var selectIds = $('#panel1,#panel2,#panel3');
		$(function($) {
		selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
		$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
		});
		$(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
		if ($(this).hasClass('collapsed')) {
		$(this).closest('.panel-group').find('.panel-default').removeClass('open');
		$(this).closest('.panel-default').addClass('open');
		} else {
		$(this).closest('.panel-default').removeClass('open');
		}
		});
		});
.panel-default.open {
		background-color: red;
		transition: all 1s;
		}
		.panel-default.open .panel-heading {
		background: transparent;
		}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
		<div class="panel-group" id="accordion">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Panel 1</a>
					</h4>
				</div>
				<div id="panel1" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 1</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
					</h4>
				</div>
				<div id="panel2" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 2</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
					</h4>
				</div>
				<div id="panel3" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 3</div>
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>