No notes defined.
{% for detail in details %}
<details class="uol-detail-container" name="{{ detail.group }}">
<summary class="uol-detail-summary">
<h{{ detail.headingLevel }}>{{ detail.title }}</h{{ detail.headingLevel }}>
</summary>
<div class="uol-detail-main uol-rich-text">
{{ detail.content | safe }}
</div>
</details>
{% endfor %}
<details class="uol-detail-container" name="group1">
<summary class="uol-detail-summary">
<h2>Accordion 1 title</h2>
</summary>
<div class="uol-detail-main uol-rich-text">
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Malesuada Etiam Egestas Condimentum Quam</li>
<li>Parturient Elit Sit Cursus Porta</li>
<li>Adipiscing Dapibus Quam Sit</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Elit Consectetur Vulputate</li>
</ul>
</div>
</details>
<details class="uol-detail-container" name="group1">
<summary class="uol-detail-summary">
<h2>Accordion 2 title</h2>
</summary>
<div class="uol-detail-main uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ipsam expedita doloremque deleniti cum iusto quasi, rem officiis numquam dolorum illum sed! Ea, doloribus adipisci quaerat laborum doloremque itaque rem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ipsam expedita doloremque deleniti cum iusto quasi, rem officiis numquam dolorum illum sed! Ea, doloribus adipisci quaerat laborum doloremque itaque rem.</p>
</div>
</details>
<details class="uol-detail-container" name="group1">
<summary class="uol-detail-summary">
<h2>Accordion 3 title</h2>
</summary>
<div class="uol-detail-main uol-rich-text">
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</details>
.uol-detail-container {
max-width: 47.5rem;
border-top: 1px solid $color-border--light;
border-bottom: 1px solid $color-border--light;
margin-top: $spacing-6;
&[open] {
.uol-detail-summary :before {
rotate: 90deg;
}
}
& + .uol-detail-container {
margin-top: 0;
border-top: none;
}
// -summary is initial component content
.uol-detail-summary {
display: block;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
position: relative;
padding: $spacing-4 0;
& :hover {
text-decoration: underline;
}
& :after {
content: "";
position: absolute;
width: 14px;
height: 2px;
text-align: right;
right: 8px;
top: 28px;
background: $color-black;
// slight nudge down due to heading style change ensures cross still central
@include media(">=uol-media-m") {
top: 30px;
}
}
& :before {
position: absolute;
content: "";
width: 2px;
height: 14px;
text-align: right;
top: 22px;
right: 14px;
background: $color-black;
transition: rotate .3s ease;
@include media(">=uol-media-m") {
top: 24px;
}
}
h2, h3, h4, h5 {
margin: 0 32px 0 0; // space on right needed to accommodate details cross
font-size: 18px; // same size for all accordion summaries
@include media(">=uol-media-m") {
font-size: 20px;
}
}
}
// -main is content which is revealed
// overwrite margin brought in by being in uol-rich-text container
.uol-detail-main {
& >*:first-child {
margin-top: 0 !important;
}
& >*:last-child {
margin-bottom: $spacing-4 !important;
}
}
}
{
"details": [
{
"group": "group1",
"headingLevel": 2,
"title": "Accordion 1 title",
"content": "\n <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <ul>\n <li>Malesuada Etiam Egestas Condimentum Quam</li>\n <li>Parturient Elit Sit Cursus Porta</li>\n <li>Adipiscing Dapibus Quam Sit</li>\n <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>\n <li>Elit Consectetur Vulputate</li>\n </ul>\n "
},
{
"group": "group1",
"headingLevel": 2,
"title": "Accordion 2 title",
"content": "\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ipsam expedita doloremque deleniti cum iusto quasi, rem officiis numquam dolorum illum sed! Ea, doloribus adipisci quaerat laborum doloremque itaque rem.</p>\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ipsam expedita doloremque deleniti cum iusto quasi, rem officiis numquam dolorum illum sed! Ea, doloribus adipisci quaerat laborum doloremque itaque rem.</p>\n "
},
{
"group": "group1",
"headingLevel": 2,
"title": "Accordion 3 title",
"content": "\n <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>\n "
}
]
}