Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/behavior.html#accordion-component
Accordion is a full-width (Section) component. There are currently not color variations.
<section class="accordion-wrapper py-5">
<div class="container">
<div class="accordion open" id="ag-accordionGroup-1">
<h2 class="h3 mb-4">Accordion Group Title</h2>
<div class="accordion-item">
<p class="accordion-header" id="heading-01">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-01">
Accordion
</button>
</p>
<div id="collapse-01" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>Accordion</h5>
text not in a a paragraph
<p>
text inside a paragraph
<img src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
<a href="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">test link</a>
</p>
<a href="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">test link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">
<p>Date</p>
</th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<p>xx, 20yy <br> 9-10 AM</p>
</th>
<td>
<p>xxx</p>
</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th>xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td>
<p>xxx</p>
</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th>xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<p class="accordion-header" id="heading-02">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-02">
Accordion
</button>
</p>
<div id="collapse-02" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna</h5>
<p>
<img src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
</p>
<p>Very little content but image doesn't overflow.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<p class="accordion-header" id="heading-03">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-03">
Accordion
</button>
</p>
<div id="collapse-03" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna</h5>
<ol>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, sapiente quam. Fugiat odit minima et laudantium architecto ullam fuga culpa ab accusantium nemo. Cumque fugiat, deserunt laborum reiciendis cupiditate tenetur.</li>
<li>Expedita ab nesciunt quas error dolore accusantium facere corporis aliquam non excepturi, aperiam voluptatem doloribus sapiente beatae ipsam libero similique vel iure a est quia suscipit? Ratione ex soluta delectus!</li>
<li>In non, vero placeat distinctio exercitationem dolore reprehenderit magnam explicabo unde architecto cupiditate, harum id iste ratione adipisci ad dolorem. Eveniet ad fugit ipsam repellendus inventore doloremque ipsa voluptas animi.</li>
<li>Dignissimos exercitationem omnis consequuntur nisi inventore. Voluptate, nesciunt! Quos, nostrum modi tempora fugit vitae iure obcaecati repellat asperiores magnam. Optio voluptatibus eius dolor harum veniam aliquid repellendus neque quidem! Officia.</li>
</ol>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam. Fusce venenatis ipsum non est porta porttitor. Curabitur aliquet mattis elit. Mauris eget velit bibendum, auctor risus eu, elementum sem. Fusce magna neque, bibendum in efficitur ut, elementum non risus. Aenean vitae elementum risus. Donec ut sollicitudin nisl. Pellentesque vehicula eu neque ut iaculis. Phasellus dignissim augue in lorem pharetra dictum. Fusce pellentesque ut ipsum quis malesuada. Duis eu ipsum eget neque vehicula hendrerit id eu libero.
</p>
<ul class="ul-list">
<li class="list-item">Use the HTML <code><ol></code> element to define an ordered
list
</li>
<li class="list-item">Use the HTML type attribute to define the numbering type</li>
<li class="list-item">Use the HTML <code><li></code> element to define a list item
</li>
<li class="list-item">Lists can be nested
<ul class="ul-list">
<li class="list-item">List nested</li>
<li class="list-item">List nested</li>
</ul>
</li>
<li class="list-item">List items can contain other HTML elements. This one contains a
<code><div></code> and an <code><img></code> HTML element.
<div>
<img class="p-2" src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
</div>
</li>
</ul>
<h2 class="h3 mb-3">Resources List</h2>
<ul class="resources-list">
<li><a href="#">Test Resource List Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/01-accordion/accordion.scss */
/* BEGIN accordion.scss */
#accordion{
scroll-margin-top: 115px;
}
@for $i from 1 through 10{
#ag-accordionGroup-#{$i}{
scroll-margin-top: 115px;
}
}
.accordion {
button:focus:not(:focus-visible) {
outline: 0;
}
.accordion-button:focus {
box-shadow: none;
outline: 0;
z-index: 3;
}
.accordion-item {
word-wrap: break-word;
background-clip: border-box;
background-color: $white;
margin-bottom: 2px;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
border: 0;
}
.accordion-item:last-of-type {
margin-bottom: 0;
}
.accordion-item:focus {
outline: 1px solid #025efc;
outline-offset: 0;
}
// heading - collapsed state
.accordion-item .accordion-button {
background-color: $white-b;
color: $blue;
display: block;
font-size: 21px;
font-weight: 600;
margin-bottom: 0;
padding: 20px 60px 20px 30px;
position: relative;
}
// + toggle icon
.accordion-button:after {
background-repeat: no-repeat;
background-size: 1.25rem;
flex-shrink: 0;
height: 1.25rem;
margin-left: auto;
transition: transform 0.2s ease-in-out;
width: 1.25rem;
content: "+";
font-size: 40px;
font-weight: 300;
line-height: 28px;
position: absolute;
right: 31px;
top: 15px;
color: $orange-a11y;
// by default from Bootstrap expand/collapse scss, this selector pulls in a background image icon "v" so, removing it here
background-image: none;
}
// END + toggle icon
// END heading - collapsed state
// heading - expanded state
.accordion-button:not(.collapsed) {
color: $white;
background-color: $blue;
margin-top: -2px;
}
// X toggle icon
.accordion-button:not(.collapsed)::after {
align-items: center;
color: $orange-a11y;
bottom: 0;
display: flex;
height: 100%;
transform: rotate(0deg);
justify-content: center;
right: 0;
top: 0;
width: 77px;
}
.accordion-button:not(.collapsed):after {
content: "×";
color: $white;
}
// END X toggle icon
// END heading - expanded state
.accordion-body-content {
display: inline-block;
padding: 1.5rem;
width: 100%;
}
.card-body {
background-color: $white-b;
position: relative;
border-top: 6px solid $orange-a11y;
border-bottom: 6px solid $blue;
}
.accordion-body-content ul li {
font-weight: 400;
}
}
.profile-details-component-div .profile-details-content p.accordion-header {
margin-bottom: 0px;
}
@include media-breakpoint-down(xs) {
.accordion {
.accordion-item .accordion-button {
padding: 20px 20px 20px 10px;
font-size: 19px;
}
.accordion-button:after {
right: 8px;
font-size: 39px;
}
// X toggle icon
.accordion-button:not(.collapsed)::after {
width: 32px;
height: 3.5rem;
}
.accordion-body-content {
padding: 0.5rem;
}
}
}
@include media-breakpoint-down(lg) {
#accordion .card-header>.card-link {
display: block;
padding: 15px 15px;
font-size: 15px;
}
#accordion .card-header>.card-link::after {
right: 10px;
top: 8px;
font-size: 30px;
}
}
@include media-breakpoint-down(xl) {
.accordion {
.accordion-item .card-body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
}
.accordion-body-content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
}
}
}
/* Dark Mode - Component Styles - Accordions */
@include color-mode(dark) {
.accordion-body-content {
padding: 1.5rem;
color: $blue;
p, ul li, ol li, h2, h3, h4, h5, h6, a, code {
color: $blue;
}
.orange {
color:$orange;
}
.orange-a11y {
color:$orange-a11y;
}
.blue {
color: $blue;
}
.white {
color: $white;
}
a {
color:$blue;
&:hover {
color:$blue;
}
}
.blue-btn{
color: $white;
&:hover{
color: $white;
}
}
.orange-btn{
color: $white;
&:hover{
color: $white;
}
}
}
@include media-breakpoint-down(xs) {
.accordion {
.accordion-body-content {
padding: 0.5rem;
}
}
}
}
/* Component Styles - Accordions END */
/* END accordion.scss */
<section class="accordion-wrapper py-5">
<div class="container">
<div class="accordion open" id="ag-accordionGroup-1">
<h2 class="h3 mb-4">{{group-title}}</h2>
<div class="accordion-item">
<p class="accordion-header" id="heading-01">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapse-01">
{{heading}}
</button>
</p>
<div id="collapse-01" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>{{heading}}</h5>
text not in a a paragraph
<p>
text inside a paragraph
<img src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
<a href="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">test link</a>
</p>
<a href="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">test link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col"><p>Date</p></th>
<th scope="col">Place</th>
<th scope="col">Speaker</th>
<th scope="col">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<p>xx, 20yy <br> 9-10 AM</p></th>
<td><p>xxx</p></td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th>xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<td>xx, 20yy <br> 9-10 AM</td>
<td><p>xxx</p></td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
<tr>
<th>xx, 20yy <br> 9-10 AM</th>
<td>xxx</td>
<td><strong>xxx, PhD</strong> <br> title <br>
<ul>
<li>Faculty Profile</li>
</ul>
</td>
<td>xxx <br> <em>—seminar flyer</em></td>
</tr>
</tbody>
</table>
<p>{{render '@button--orange'}} {{render '@button'}} {{render '@button--grey'}}</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<p class="accordion-header" id="heading-02">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapse-02">
{{heading}}
</button>
</p>
<div id="collapse-02" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>{{title}}</h5>
<p>
<img src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
</p>
<p>Very little content but image doesn't overflow.</p>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<p class="accordion-header" id="heading-03">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapse-03">
{{heading}}
</button>
</p>
<div id="collapse-03" class="accordion-collapse collapse d-print-block">
<div class="card-body">
<div class="accordion-body-content">
<h5>{{title}}</h5>
<ol>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, sapiente quam. Fugiat odit minima et laudantium architecto ullam fuga culpa ab accusantium nemo. Cumque fugiat, deserunt laborum reiciendis cupiditate tenetur.</li>
<li>Expedita ab nesciunt quas error dolore accusantium facere corporis aliquam non excepturi, aperiam voluptatem doloribus sapiente beatae ipsam libero similique vel iure a est quia suscipit? Ratione ex soluta delectus!</li>
<li>In non, vero placeat distinctio exercitationem dolore reprehenderit magnam explicabo unde architecto cupiditate, harum id iste ratione adipisci ad dolorem. Eveniet ad fugit ipsam repellendus inventore doloremque ipsa voluptas animi.</li>
<li>Dignissimos exercitationem omnis consequuntur nisi inventore. Voluptate, nesciunt! Quos, nostrum modi tempora fugit vitae iure obcaecati repellat asperiores magnam. Optio voluptatibus eius dolor harum veniam aliquid repellendus neque quidem! Officia.</li>
</ol>
<p>
{{text}}
</p>
<ul class="ul-list">
<li class="list-item">Use the HTML <code><ol></code> element to define an ordered
list
</li>
<li class="list-item">Use the HTML type attribute to define the numbering type</li>
<li class="list-item">Use the HTML <code><li></code> element to define a list item
</li>
<li class="list-item">Lists can be nested
<ul class="ul-list">
<li class="list-item">List nested</li>
<li class="list-item">List nested</li>
</ul>
</li>
<li class="list-item">List items can contain other HTML elements. This one contains a
<code><div></code> and an <code><img></code> HTML element.
<div>
<img class="p-2" src="https://utsa-asc.github.io/college-dls/college-dls/college/images/content-highland-card.png">
</div>
</li>
</ul>
<h2 class="h3 mb-3">Resources List</h2>
<ul class="resources-list">
<li><a href="#">Test Resource List Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>