Changing panel background color on bootstrap panel

I have two collapsable div using bootstrap to show and hide and I'm able to change the color but as soon as I select the next one it changes, I would like for the one that is selected to stay open and the header to change colors and then when the next one is selected it opens and the header changes color leaving the one that is open as it is. Next I have a different page that has the same thing but when you choose the second div to open I want it to close the first one.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <style>
@import url("bootstrap.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");


.panel-default > .panel-heading {
    cursor: pointer;
	background-color: #e35600;
	color:#FFFFFF;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid #0074BD;
}
.panel-heading h3 {
	width: 100%;
	text-transform: uppercase;
	font-size: 16pt;
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	text-align: center;
	color: #FFF;
	line-height: 1.0;
	font-weight: normal;
}


.panel-default .panel-heading:hover {
color: #333333;
background:#f5f5f5;
border-color: #dddddd;
}

.center-block {
	display:inline-block;
    margin-left: auto;
    margin-right: auto;
}
.col-xs-4{
	float:none;
	vertical-align:top;
	padding-left: 2px;
    padding-right: 2px;
}
h3 {
	width: 100%;
	text-transform: uppercase;
	font-size: 16pt;
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	text-align: center;
	color: #FFF;
	line-height: 1.0;
	font-weight: normal;
}

.clickableSplash {
	pointer-events: auto;
    cursor: pointer;
}

.panel-heading.active {
    background-color: green;
}  
</style>

    
</head>

<body>
<div id="splash">
		<div class="row">
            <div class="col-xs-12" align="center">
              <h2>Please select an option below to get started</h2>
			  </div>
          </div> 
		<div class="container" id="accordion">
        <div class="col-xs-12 center-block" align="center">
         <div class="col-xs-4 center-block clickableSplash">
			<div class="panel panel-default">
				<div class="panel-heading" data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
					<h3 class="panel-title">New User</h3>
				</div>
                <div id="collapseOne" class="panel-collapse collapse">
				<div class="panel-body">
                   box 1
				</div>
                </div>
			</div>
		</div>
		<div class="col-xs-4 center-block clickableSplash">
			<div class="panel panel-default">
				<div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion">
					<h3 class="panel-title">Existing User</h3>
				</div>
              <div id="collapseTwo" class="panel-collapse collapse">
				<div class="panel-body">
                    box 2
				</div>
                </div>
		    </div>
	    </div>         
    </div>
       </div>
</div>


<div id="SiteWrapper"></div>
<script>

jQuery(function ($) {
	var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
	
	$('#accordion').on('show.bs.collapse', function (e)
	{
		$('#accordion .panel-heading.active').removeClass('active');
		$(e.target).prev().addClass('active');
	});
	$('#accordion').on('hide.bs.collapse', function (e)
	{
		$(e.target).prev().removeClass('active');
	});
});

</script>
</body>
</html>

Open in new window

ucohockeyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Could be me, but I am confused.

I couldn't easily recreate this.  I can see the buttons but not the panels http://jsbin.com/kutuqi/1/edit?html,output.  I can not see the panels though.


As a side note, if you are going to place your jquery at the bottom, then you should load your jquery and javascript files at the bottom as well.   Also, you have div's with align center and that is no longer valid. You can give your div the class text-center, http://getbootstrap.com/css/
0
ucohockeyAuthor Commented:
Thanks for helping. When you look at it and you press on new user the divorce expands and the header goes from orange to green, that works like I want but if you press on existing  user while the new user is expanded the green header on the new user turns back to orange I need it to stay green if the box is expanded. Thanks
0
ucohockeyAuthor Commented:
Sorry it auto typed divorce when it should be div
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
When I click on either of the orange tabs, it turns white.  When the mouse is off, it goes back to orange.  The panels below do not show up.   Please see the rendered code as you provided  http://jsbin.com/kutuqi/1/edit?html,output

Did you add some custom css not accounted for?
0
ucohockeyAuthor Commented:
Thats change when I view the link the hoover turns light gray and then when I click the div expands and what was orange turns green.
0
ucohockeyAuthor Commented:
What I'm trying to accomplish is to have two or three expandable divs side by side and have the header change colors when the div is expanded. I also need those same divs to collapse when a different div is expanded but only when on mobile. Not sure if this helps. But I really appreciate your help new to this stuff.
0
SSupremeCommented:
I don't think you need to add "active" class as "active" can be counted as not "collapsed".
1. Remove inline script.
2. adjust css inline as follows:
.panel-default > .panel-heading {
    cursor: pointer;
	background-color: green;
	color:#FFFFFF;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid #0074BD;
}
.panel-heading.collapsed {
    background-color: #e35600;
}  

Open in new window

3. Add "collapsed" from start: <div class="panel-heading collapsed"
You'll get something like this:
http://jsbin.com/nuloluqicu/1/edit?html,output

I hope I understood your question.

I also need those same divs to collapse when a different div is expanded but only when on mobile.
About extra question, not sure.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.