Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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. 

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading