如何将手风琴的颜色从活动更改为非活动？

$('.panel-title').on('click', function(){
  $(this).parent().toggleClass('inactivo')
});

.inactivo {
  background: red !important;
}


/***
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>

$('#accordion').on('show.bs.collapse', function(evt) {
  //evt.target es el elemento al que se le ha hecho click
  $(evt.target).prev().removeClass('inactivo')
})
$('#accordion').on('hide.bs.collapse', function(evt) {
  //evt.target es el elemento al que se le ha hecho click
  $(evt.target).prev().addClass('inactivo')
})

.inactivo {
  background: red !important;
}


/***
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 inactivo" 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 inactivo" 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>

/***
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;
}

.panel-heading h4 a[aria-expanded="true"] {
  color: #3498db !important;
}

<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>