FAA Pattern Library - Department of Urban and Regional Planning

collapsible-container: No Header Or Intro Text 

<div class="collapsible-container collapsible-container--durp collapsible-container--">
    <div class="collapsible-container__header-content ">
    </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": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "component": {
    "type": "collapsible-container",
    "header": null,
    "introText": null,
    "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>"
      }
    ]
  }
}
  • Content: 
    .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
  • URL: /components/raw/collapsible-container-component/collapsible-container-component.styl
  • Filesystem Path: components/components/collapsible-container-component/collapsible-container-component.styl
  • Size: 2.9 KB

There are no notes for this item.