Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

254
Vistas
accordion collapse change background color when clicked (collapsed)

I am having difficulties of this code. I know this is too easy for you. I have accordion collapse changing background color when clicked(collapsed). the transition of none background color into background color is successfully working fine. the only problem is, I like to deactivate the background color on the first load. here is the code http://jsfiddle.net/gjLxo7be/

.med-header a:not(.collapsed) {
    background-color: #1b3189;
}

a:not(.collapsed) p.contitle1 {
    color: #fff;
}

p.contitle1 {
  color: #1b3189;
  font-size: 25px;
  letter-spacing: 1px;
  margin: 0 15px;
    text-align: justify;
    font-weight: 500;
  }
  
 .med-header a {
    display: block;
    position: relative;
  }
<div id="accordion" role="tablist">
<div class="card m-1 ">
<!--1st-->                              
<div class="panel-default-med">
<div class="med-header" role="tab">
<a data-toggle="collapse" class="text-decoration-none" href="#section-1">
<div class="med-wrap">
 <p class="contitle1">診療方針について</p>
</div>
</a>
</div>
<div class="collapse" id="section-1" data-parent="#accordion">
<div class="card-body">
<p class="context-med">
糖尿病や高血圧等のいわゆる生活習慣病の予防および治療、その合併症である循環器、腎臓疾患等を診療します。 またプライマリ・ケア医として一般内科の他、風邪、呼吸器疾患、骨粗鬆症等の診断や治療も行います。一方で、高齢化に伴って急増している認知症につきましても、もの忘れ外来を開設して診療を行います。                                           
</p>
</div>
</div>
</div>
</div> 
</div>

or maybe closed the collapse accordion when clicked outside by using javascript? any codes will do. 
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You won't believe me, but just do this, add "collapsed" class to the "anchor" tag like this,

<a data-toggle="collapse" class="text-decoration-none collapsed" href="#section-1">

You are good to go.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda