Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Accordions

Accordions are used to organize lots of content into collapsible components.

There are three styles of accordion:

  • Block Accordions - used for breaking up content by campus (or location)
  • Quiet Accordions - used for hiding blocks of content or styling collapsible FAQs
  • Small Accordions - used for special cases where there is additional content that is hidden away for visual or layout purposes

Block Accordion (for Campus Info)

Accordion Content

Basic Code:

<div class="panel-group pgs-accordion" id="[CAMPUS-ID]">
    <h3>
        <button type="button" data-target="#collapse-[CAMPUS-ID]" class="bg-cgrey collapsible collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-[CAMPUS-ID]">
            <span aria-hidden="true" class="ico fas fa-chevron-circle-right"></span>Campus Accordion Title
        </button>
    </h3>
    <div id="collapse-[CAMPUS-ID]" class="panel-collapse collapse">
        <div class="panel-body">
            <p>Accordion Content</p>
        </div>
    </div>
</div>
  • While the [CAMPUS-ID] could probably be whatever (just as long as it all matches up), for consistency we use the following:
    • Main campuses: BHC, CVC, EFC, ECC, MVC, NLC, RLC
    • College operations: AO, DCSC, LCET
    • Centers and locations: BJP, CSC, CC, CPHC, DHC, DDC, DHSC, GC, IC, PGC, WDC

Quiet Accordion (for Content Blocks or FAQs)

Accordion Content

Basic Code:

<div class="panel-group pgs-accordion pgs-accordion--quiet" id="FAQ-[question]">
    <h3>
        <button type="button" data-target="#collapse-FAQ-[question]" class="collapsible collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-FAQ-[question]">
            <span aria-hidden="true" class="ico fas fa-chevron-circle-right"></span>Quiet Accordion Title/Question
        </button>
    </h3>
    <div id="collapse-FAQ-[question]" class="panel-collapse collapse">
        <div class="panel-body">
            <p>Accordion Content</p>
        </div>
    </div>
</div>
  • The [question] can be made up of lowercase letters seperated by hyphens.

Small Accordion

Accordion Content

Basic Code:

<div class="panel-group pgs-accordion pgs-accordion--quiet pgs-accordion--sm" id="[accordion]">
    <h3>
        <button type="button" data-target="#collapse-[accordion]" class="collapsible collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-[accordion]">
            <span aria-hidden="true" class="ico fas fa-chevron-circle-right"></span>Small/Quiet Accordion Title
        </button>
    </h3>
    <div id="collapse-[accordion]" class="panel-collapse collapse">
        <div class="panel-body">
            <p>Accordion Content</p>
        </div>
    </div>
</div>
  • The [accordion] can be made up of lowercase letters seperated by hyphens.

Components