<div class="collapsible-container collapsible-container--network collapsible-container--">
<div class="collapsible-container__header-content ">
<h2 class="collapsible-container__header " aria-label="Vestibulum malesuada neque eu odio fermentum vestibulum. Ut vulputate commodo dui, eget pellentesque libero interdum non.">
Vestibulum malesuada neque eu odio fermentum vestibulum. Ut vulputate commodo dui, eget pellentesque libero interdum non.
</h2>
<div class="collapsible-container__intro-text">
Vivamus consectetur felis vitae mi rutrum, id egestas lorem consectetur. Sed finibus felis tincidunt molestie iaculis. Mauris dui nunc, aliquet non velit vitae, tempor finibus ipsum. Duis non eros in nulla dapibus ultrices. Ut lobortis tristique sem,
id faucibus est porta quis.
</div>
</div>
<div class="collapsible-container__item">
<button class="collapsible-container__container-button" data-expanded data-collapsible-container-button aria-expanded="true" aria-controls=ContainerTitleOne1 aria-label="Toggle content for Container Title One">
<span class="collapsible-container__container-title"
data-expanded data-collapsible-container-title>
Container Title One
</span>
<span class="collapsible-container__container-icon"
data-expanded data-collapsible-container-icon>
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</button>
<div class="collapsible-container__container" data-expanded data-collapsible-container-text>
<div class="collapsible-container__container-text" id="ContainerTitleOne1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p>
<ul>
<li>Sed convallis magna in posuere vulputate</li>
<li>Pellentesque sit amet aliquet nisl</li>
<li>Curabitur nec dapibus lorem</li>
</div>
</div>
</div>
<div class="collapsible-container__item">
<button class="collapsible-container__container-button" data-expanded data-collapsible-container-button aria-expanded="true" aria-controls=ContainerTitleTwo2 aria-label="Toggle content for Container Title Two">
<span class="collapsible-container__container-title"
data-expanded data-collapsible-container-title>
Container Title Two
</span>
<span class="collapsible-container__container-icon"
data-expanded data-collapsible-container-icon>
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</button>
<div class="collapsible-container__container" data-expanded data-collapsible-container-text>
<div class="collapsible-container__container-text" id="ContainerTitleTwo2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p>
<ol>
<li>Sed convallis magna in posuere vulputate</li>
<li>Pellentesque sit amet aliquet nisl</li>
<li>Curabitur nec dapibus lorem</li>
</div>
</div>
</div>
<div class="collapsible-container__item">
<button class="collapsible-container__container-button" data-expanded data-collapsible-container-button aria-expanded="true" aria-controls=ContainerTitleThree3 aria-label="Toggle content for Container Title Three">
<span class="collapsible-container__container-title"
data-expanded data-collapsible-container-title>
Container Title Three
</span>
<span class="collapsible-container__container-icon"
data-expanded data-collapsible-container-icon>
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</button>
<div class="collapsible-container__container" data-expanded data-collapsible-container-text>
<div class="collapsible-container__container-text" id="ContainerTitleThree3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p>
<ul>
<li>Sed convallis magna in posuere vulputate</li>
<li>Pellentesque sit amet aliquet nisl</li>
<li>Curabitur nec dapibus lorem</li>
</div>
</div>
</div>
<div class="collapsible-container__item">
<button class="collapsible-container__container-button" data-expanded data-collapsible-container-button aria-expanded="true" aria-controls=ContainerTitleFour4 aria-label="Toggle content for Container Title Four">
<span class="collapsible-container__container-title"
data-expanded data-collapsible-container-title>
Container Title Four
</span>
<span class="collapsible-container__container-icon"
data-expanded data-collapsible-container-icon>
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</button>
<div class="collapsible-container__container" data-expanded data-collapsible-container-text>
<div class="collapsible-container__container-text" id="ContainerTitleFour4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p>
<ol>
<li>Sed convallis magna in posuere vulputate</li>
<li>Pellentesque sit amet aliquet nisl</li>
<li>Curabitur nec dapibus lorem</li>
</div>
</div>
</div>
</div>
{% if is_wordpress %}
{{ enqueue_script('collapsible-container') }}
{% endif %}
<div class="collapsible-container collapsible-container--{{ siteUnit }} collapsible-container--{{ componentSpacing }}">
<div class="collapsible-container__header-content {{ component.hideHeader ? 'collapsible-container__header-content--no-header' }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="collapsible-container__header {{ component.hideHeader ? 'collapsible-container__header--is-hidden' : '' }}"
aria-label="{{ component.header }}">
{{ component.header }}
</h2>
{% endif %}
{% if component.introText | default %}
<div class="collapsible-container__intro-text">
{{ component.introText | raw }}
</div>
{% endif %}
</div>
{% for container in component.containers %}
<div class="collapsible-container__item">
{% set id = container.containerTitle|replace({' ' : ''})~loop.index %}
<button class="collapsible-container__container-button"
data-expanded data-collapsible-container-button
aria-expanded="true"
aria-controls={{ id }}
aria-label="Toggle content for {{ container.containerTitle }}">
<span class="collapsible-container__container-title"
data-expanded data-collapsible-container-title>
{{ container.containerTitle }}
</span>
<span class="collapsible-container__container-icon"
data-expanded data-collapsible-container-icon>
{% include 'bits/icons/down-toggle.twig' %}
</span>
</button>
<div class="collapsible-container__container"
data-expanded data-collapsible-container-text>
<div class="collapsible-container__container-text" id="{{ id }}">
{{ container.text }}
</div>
</div>
</div>
{% endfor %}
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"component": {
"type": "collapsible-container",
"header": "Vestibulum malesuada neque eu odio fermentum vestibulum. Ut vulputate commodo dui, eget pellentesque libero interdum non.",
"introText": "Vivamus consectetur felis vitae mi rutrum, id egestas lorem consectetur. Sed finibus felis tincidunt molestie iaculis. Mauris dui nunc, aliquet non velit vitae, tempor finibus ipsum. Duis non eros in nulla dapibus ultrices. Ut lobortis tristique sem, id faucibus est porta quis.",
"containers": [
{
"containerTitle": "Container Title One",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p><ul><li>Sed convallis magna in posuere vulputate</li><li>Pellentesque sit amet aliquet nisl</li><li>Curabitur nec dapibus lorem</li>"
},
{
"containerTitle": "Container Title Two",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p><ol><li>Sed convallis magna in posuere vulputate</li><li>Pellentesque sit amet aliquet nisl</li><li>Curabitur nec dapibus lorem</li>"
},
{
"containerTitle": "Container Title Three",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p><ul><li>Sed convallis magna in posuere vulputate</li><li>Pellentesque sit amet aliquet nisl</li><li>Curabitur nec dapibus lorem</li>"
},
{
"containerTitle": "Container Title Four",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sapien nibh, in tempor ex elementum at. Donec felis elit, blandit sed ornare eget, bibendum ac arcu.:</p><ol><li>Sed convallis magna in posuere vulputate</li><li>Pellentesque sit amet aliquet nisl</li><li>Curabitur nec dapibus lorem</li>"
}
]
}
}
.collapsible-container
&--arch
--textColorActive industrialBlue
--iconFillColor industrialBlue
&--art
--textColorActive archesBlue
--iconFillColor archesBlue
&--college
--textColorActive illiniOrange
--iconFillColor illiniBlue
&--dance
--textColorActive archesBlue
--iconFillColor archesBlue
&--durp
--textColorActive illiniOrange
--iconFillColor illiniOrange
&--landarch
--textColorActive illiniOrange
--iconFillColor black
&--theatre
--textColorActive illiniOrange
--iconFillColor illiniOrange
&--music
--textColorActive illiniOrange
--iconFillColor illiniBlue
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__header-content
margin-bottom 64px
&--no-header
margin-bottom 0
&__header
@extends $primaryLead
&--is-hidden
@extends $invisible
&__intro-text
@extends $primaryParagraph
margin-top 8px
&__item
border-radius 8px
margin-bottom 16px
&__container-button
align-items center
background-color white
border-top-left-radius 8px
border-top-right-radius 8px
display flex
justify-content space-between
overflow hidden
padding 24px
width 100%
&[data-collapsed]
border-bottom-left-radius 8px
border-bottom-right-radius 8px
color var(--textColorActive)
font-weight 400
&:hover .collapsible-container__container-title
&:focus .collapsible-container__container-title
color var(--textColorActive)
font-weight 700
&:hover .collapsible-container__container-icon svg path
&:focus .collapsible-container__container-icon svg path
fill var(--iconFillColor)
&__container-title
@extends $secondaryLead
padding-right 16px
text-align left
&[data-expanded]
color var(--textColorActive)
font-weight 700
&__container-icon
transition all 300ms ease
&[data-collapsed]
svg path
fill var(--iconFillColor)
&[data-expanded]
transform rotate(180deg)
&__container
background-color white
border-bottom-left-radius 8px
border-bottom-right-radius 8px
border-top none
padding 24px
&[data-collapsed]
display none
&[data-expanded]
display block
text-shadow 0 0 .9px white, 0 0 .9px white
&__container-text
@extends $richText
margin-top 16px
There are no notes for this item.