Acordeón colapso cambiar el color de fondo cuando se hace clic (colapsado)

0

Pregunta

Estoy teniendo problemas de este código. Sé que esto es demasiado fácil para ti. He acordeón colapso de cambiar el color de fondo cuando se hace clic(colapsado). la transición de ninguno color de fondo en el color de fondo está correctamente funcionando bien. el único problema es que me gusta desactivar el color de fondo en la primera carga. aquí está el código 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. 
css html javascript
2021-11-24 03:12:18
1

Mejor respuesta

1

Usted no me cree, pero sólo ello, agregue "colapsado" clase para el "ancla" de la etiqueta como esta,

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

Que son buenos para ir.

2021-11-24 03:43:44

gracias, pero ¿cómo podía cierre automático cuando otro acordeón se hace clic?
maru

Tienes que poner el niño acordeón con clase accordion-item dentro de la matriz de acordeón con clase accordion
shirshak007

No lo entiendo?
maru

<div class="accordion"> <!-- padre --> <div class="accordion-item"> <!-- Niño 1 --> ... </div> <div class="accordion-item"> <!-- Niño 2 --> ... </div> <div class="accordion-item"> <!-- Niño 3 --> ... </div> </div> ... como este
shirshak007


usted no me cree, pero no funciona. jsfiddle.net/cp6rsqy4
maru

lo que está usted usando bootstrap 3 o 4 ?
shirshak007

Estoy usando bootstrap 3
maru

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................