More actions
No edit summary |
No edit summary |
||
Line 49: | Line 49: | ||
/* Style for collapsed sections */ | /* Style for collapsed sections */ | ||
.accordion- | /* Header styling (collapsed by default) */ | ||
.accordion-header { | |||
background-color: #e0e0e0; /* Gray when collapsed */ | background-color: #e0e0e0; /* Gray when collapsed */ | ||
font-weight: normal; | font-weight: normal; | ||
padding: | padding: 15px; /* Larger padding for easier clicking */ | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
cursor: pointer; | cursor: pointer; | ||
display: block; | display: block; | ||
width: 100%; /* Full width | width: 100%; /* Full width */ | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* | /* Header when expanded */ | ||
.accordion-section | .accordion-section.expanded .accordion-header { | ||
background-color: #d0ffd0; /* Light green when expanded */ | background-color: #d0ffd0; /* Light green when expanded */ | ||
font-weight: bold; | font-weight: bold; | ||
border: 1px solid #00cc00; | border: 1px solid #00cc00; | ||
} | } | ||
/* Content styling */ | /* Content styling */ | ||
.accordion | .accordion-content { | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
padding: 10px; | padding: 10px; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } |