feat: replace accordion implementation with details/summary
Migrated accordion elements from a Bootstrap-based approach to using the native HTML <details> and <summary> tags for better accessibility and reduced reliance on third-party libraries. Enhanced CSS for the accordion components to style hover effects and manage open states effectively. Simplified icon handling within accordion bodies.
This commit is contained in:
parent
ac9286bf7e
commit
7dd217a78e
2 changed files with 53 additions and 60 deletions
|
@ -280,19 +280,30 @@ h5 {
|
|||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accordion-button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.accordion-collapse {
|
||||
|
||||
.accordion-header:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion-item[open] .accordion-body {
|
||||
display: block;
|
||||
}
|
|
@ -36,28 +36,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="py-5 p-lg-5">
|
||||
<div class="accordion" id="servicesAccordion">
|
||||
<div class="accordion">
|
||||
{% for service in services.services %} {% if not
|
||||
service.exclude_from_index %}
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="heading{{ loop.index }}">
|
||||
<button
|
||||
class="accordion-button"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse{{ loop.index }}"
|
||||
aria-expanded="true"
|
||||
aria-controls="collapse{{ loop.index }}"
|
||||
>
|
||||
{{ service.name }}
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="collapse{{ loop.index }}"
|
||||
class="accordion-collapse collapse"
|
||||
aria-labelledby="heading{{ loop.index }}"
|
||||
data-bs-parent="#servicesAccordion"
|
||||
>
|
||||
<details class="accordion-item">
|
||||
<summary class="accordion-header">{{ service.name }}</summary>
|
||||
<div class="accordion-body">
|
||||
{% if service.icon %}
|
||||
<div
|
||||
|
@ -97,8 +80,7 @@
|
|||
>
|
||||
{% endif %} {% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{% endif %} {% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue