accordion collapse change background color when clicked (collapsed)

maru

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

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Accordion - Change background color/image when toggling:

how to change collapse inside collapse background color with different width inside. Accordion from bootstrap 4.5

Collapsed navbar background color change

bootstrap3 - how to change background color when in collapsed mode

Trying to change the background color of the Bootstrap accordion title when opened

Change accordion button collapsed icon color in Bootstrap 5

How to change the background color of cardview when the notification history clicked?

How can I change the background color of a button when clicked?

How can I change the background color of elements when they're clicked?

change the background color of view when clicked on another view

jQuery - OnClick, change background color for table cells always when clicked

How to change background color of a cell when it is double clicked?

Change background color of bootstrap dropdown link when clicked

jquery change background color of td when clicked on empty portion

background color change when clicked 2x

button:active{} does not change the background color when the button is clicked

Stop expanding/collapse of accordion when cancel to delete icon is clicked

Bourbon accordion click once expand/collapse when clicked

Antd: Need to change the background color of collapse body

Change button background when clicked

Label change color when clicked

Change button color when clicked

Change background color of clicked option in duallistbox

Change collapsed navbar color

Toggle button background color when clicked

Changing background color of a TextView when clicked

Changing background color of a button when clicked

How do I change the background-color of an accordion tab in Bootstrap?

Javascript select entire row (change background color) of a table with checkbox and deselect when next checkbox is clicked

TOP Ranking

HotTag

Archive