Quiero cambiar el color de mi accordion cuando este activo e inactivo.
Accordion 1: Activo : color : White | Inactivo : color : Blue
Accordion 2: Activo : color : White | Inactivo : color : Blue
/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
#menu ul {
list-style: none;
}
/* Tabs panel */
.tabbable-panel {
border: 1px solid #eee;
padding: 10px;
}
/* Default mode */
.tabbable-line>.nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line>.nav-tabs>li {
margin-right: 2px;
}
.tabbable-line>.nav-tabs>li>a {
border: 0;
margin-right: 20px;
color: #737373;
float: center;
}
.tabbable-line>.nav-tabs>li>a>i {
color: #a6a6a6;
}
.tabbable-line>.nav-tabs>li.open,
.tabbable-line>.nav-tabs>li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line>.nav-tabs>li.open>a,
.tabbable-line>.nav-tabs>li:hover>a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line>.nav-tabs>li.open>a>i,
.tabbable-line>.nav-tabs>li:hover>a>i {
color: #a6a6a6;
}
.tabbable-line>.nav-tabs>li.open .dropdown-menu,
.tabbable-line>.nav-tabs>li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line>.nav-tabs>li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line>.nav-tabs>li.active>a {
border: 0;
color: #333333;
}
.tabbable-line>.nav-tabs>li.active>a>i {
color: #404040;
}
.tabbable-line>.tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line>.tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below>.nav-tabs>li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below>.nav-tabs>li>a {
margin-top: 0;
}
.tabbable-line.tabs-below>.nav-tabs>li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below>li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below>.tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.color {
background-color: #A4A4A4;
}
.containerB {
width: 100%;
background-color: #E5E1E1;
color: black;
}
.cuadro_intro_hover {
padding: 0px;
position: relative;
overflow: hidden;
height: 200px;
}
.cuadro_intro_hover:hover .caption {
opacity: 1;
transform: translateY(-150px);
-webkit-transform: translateY(-150px);
-moz-transform: translateY(-150px);
-ms-transform: translateY(-150px);
-o-transform: translateY(-150px);
}
.cuadro_intro_hover img {
z-index: 4;
}
.cuadro_intro_hover .caption {
position: absolute;
top: 150px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 100%;
}
.cuadro_intro_hover .blur {
background-color: rgba(0, 0, 0, 0.7);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
.cuadro_intro_hover .caption-text {
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top: -20px;
width: 100%;
}
a {
color: #fff;
}
a:hover {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #fff">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" style=" text-decoration: none">
<h1> Bugs</h1>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="cta-desc">
<ul>
<p>
<li>
Se aplicaron correcciones en el formato de fecha de la pantalla... <a href="Ver mas.html" style="color:black"><u>(899820)</u></a>
</li>
</p>
<li>
<p>Se realizaron las siguientes modificaciones en la pantalla “SRVF015 – Consulta de inmuebles”... <a href="" style="color:black"><u>(808891)</u></a>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #fff;">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" style=" text-decoration: none; color: black;">
<h1>Mejoras</h1>
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="cta-desc">
<ul>
<li>
<p>Actualmente AMERIKA TI está realizando una depuración de los objetos que hacen parte de la versión del Producto, por lo tanto se envía... <a href="Ver mas1.html" style="color:black"><u>(595367)</u></a>
</p>
</li>
<li>
<p>Actualmente AMERIKA TI está realizando una depuración de los objetos que hacen parte de la versión del Producto, por lo tanto se envía... <a href="" style="color:black"><u>(726403)</u></a>
</p>
</li>
<li>
<p>En el reporte “SRVR917 - Reporte de vida útil de medidores” el cual se genera desde la pantalla... <a href="" style="color:black"><u>(789762)</u></a>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>