Lehigh Clutch Style Guide

Accordion 

<div class="accordion" id="accordionaccordionExample">

    <div class="card accordion_item">
        <div class="card-header" id="headingone">
            <h3 class="mb-0">
                <button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="true" aria-controls="collapseone">
                    <span class="accordion-button-text">
                        This is the accordion heading 1
                    </span>
                    <i class="fas fa-chevron-down"></i>
                    <span class="sr-only">Show the content</span>
                </button>
            </h3>
        </div>

        <div id="collapseone" class="collapse show" aria-labelledby="headingone" data-parent="#accordionaccordionExample">
            <div class="card-body">
                This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
            </div>
        </div>
    </div>

    <div class="card accordion_item">
        <div class="card-header" id="headingtwo">
            <h3 class="mb-0">
                <button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
                    <span class="accordion-button-text">
                        This is the accordion heading 2
                    </span>
                    <i class="fas fa-chevron-down"></i>
                    <span class="sr-only">Show the content</span>
                </button>
            </h3>
        </div>

        <div id="collapsetwo" class="collapse" aria-labelledby="headingtwo" data-parent="#accordionaccordionExample">
            <div class="card-body">
                This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
            </div>
        </div>
    </div>

    <div class="card accordion_item">
        <div class="card-header" id="headingthree">
            <h3 class="mb-0">
                <button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapsethree" aria-expanded="false" aria-controls="collapsethree">
                    <span class="accordion-button-text">
                        This is the accordion heading 3
                    </span>
                    <i class="fas fa-chevron-down"></i>
                    <span class="sr-only">Show the content</span>
                </button>
            </h3>
        </div>

        <div id="collapsethree" class="collapse" aria-labelledby="headingthree" data-parent="#accordionaccordionExample">
            <div class="card-body">
                This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
            </div>
        </div>
    </div>
</div>
 
<div class="accordion" id="accordion{{ accordion_name }}">
  {% block cms_override %}
    {% for accordion_item in accordion_items %}
      {% include "@accordion_item" with accordion_item %}
    {% endfor %}
  {% endblock cms_override %}
</div>
 
{
  "accordion_name": "accordionExample",
  "accordion_items": {
    "1": {
      "accordion_heading": "This is the accordion heading 1",
      "accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
      "accordion_id": "one",
      "accordion_active": true
    },
    "2": {
      "accordion_heading": "This is the accordion heading 2",
      "accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
      "accordion_id": "two"
    },
    "3": {
      "accordion_heading": "This is the accordion heading 3",
      "accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
      "accordion_id": "three"
    }
  }
}
  • Content: 
    .accordion {
  margin-top: $space_and_half;
  margin-bottom: $space_and_half;

  .card {
    box-shadow: unset;
  }
}
  • URL: /components/raw/accordion_list/accordion_list.scss
  • Filesystem Path: bits/04-components/accordion_list/accordion_list.scss
  • Size: 118 Bytes

Display accordion list component.