3

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>

0

2 respuestas 2

4

Puedes hacerlo también con jQuery, primero que nada tiene especificar una regla css en este caso uso:

.inactivo {
  background: red !important;
}

y con jQuery hago lo siguiente:

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

Lo que hago es detectar el click en la clase panel-title para después obtener el padre y aplicarle el estilo que he creado anteriormente, pero como este al ocultarse debe quitarse es por eso que he usado .toggleClass() para quitar y poner cada que se de click en un elemento.

Tu ejemplo funcionando:

$('.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>


Edit:
Por Petición de Shaz utilizando los eventos de bootstrap se haría de la siguiente manera:

//Detectando cuando se abre el collapse y eliminamos el fondo rojo
$('#accordion').on('show.bs.collapse', function(evt) {
  //evt.target es el elemento al que se le ha hecho click
  $(evt.target).prev().removeClass('inactivo')
})
//Detectando cuando se cierra el collapse se agrega el fondo rojo
$('#accordion').on('hide.bs.collapse', function(evt) {
  //evt.target es el elemento al que se le ha hecho click
  $(evt.target).prev().addClass('inactivo')
})

Ejemplo funcionando

$('#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>

6
  • Aunque esta solución es mejor que la otra en mi opinión, creo que sería mejor práctica utilizar los eventos de Bootstrap: getbootstrap.com/javascript/#collapse-events , si lo puedes adaptar, tendrás +1 de mi parte.
    – Shaz
    Commented el 21 jun. 2017 a las 17:09
  • @Shaz he adaptado a lo que me siguieres
    – JuankGlezz
    Commented el 21 jun. 2017 a las 17:54
  • @Shaz ¿Usar los eventos de bootstrap para añadir una clase css que cambie de color al tab es más práctico y Limpio que una sola línea de css? Muy interesante.
    – gugadev
    Commented el 21 jun. 2017 a las 17:59
  • @GustavoGarcía si te fijas, el efecto es muy distinto. En esta solución se propone cambiar el color del fondo (y por ende el del texto también podría cambiarse), en la tuya únicamente se cambia el color del texto, lo cual se puede realizar solo por CSS. Si puedes cambiar el color del fondo con solo CSS, me comeré mis palabras y tendrás mi +1.
    – Shaz
    Commented el 21 jun. 2017 a las 18:01
  • @Shaz Entiendo tu punto; en ese caso sería muy conveniente que el OP ponga si quiere cambiar el fondo o solo el color para que se le pueda dar una respuesta de acorde. Si quisiese cambiar otras cosas además del color, esta respuesta definitivamente es la más adecuada.
    – gugadev
    Commented el 21 jun. 2017 a las 18:09
2

Puedes hacerlo colocando un color específico cuando el atributo aria-expanded es true:

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

Ejemplo

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.