CBP UI Library

Accordion: Default 

<details class="accordion ">
    <summary class="accordion__handle">Accordion Handle</summary>
    <div class="accordion__body">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
    </div>
</details>

<link media="all" rel="stylesheet" href="/accordion/accordion.css" />
<script src="/accordion/accordion.js"></script>
 
<details class="accordion {{ containerClass }}">
    <summary class="accordion__handle">{{ title }}</summary>
    <div class="accordion__body">{{ body }}</div>
</details>

{% import "_macros.twig" as h %}
{{ h.componentAssets('accordion') }}
 
{
  "containerClass": null,
  "title": "Accordion Handle",
  "body": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>"
}
  • Content: 
    @use "../_layout/mixins";

%accordion-ladder {
  border-block-start: 1px solid var(--neutral);
  margin-block-start: 0.7em;
  padding-block-start: 0.7em;
}
.accordion--ladder {
  & + & {
    @extend %accordion-ladder;
  }
}
.accordionLadder {
  .accordion + .accordion {
    @extend %accordion-ladder;
  }
}
.accordion__handle {
  cursor: pointer;
  color: var(--color);

  & > * {
    display: inline;
  }
}
.accordion__handle--link {
  @include mixins.blockLink($underline: false);

  &:hover {
    text-decoration: none;
  }
}
.accordion__body {
  margin-block: var(--accordionBodyBlockSpacing, 0.7em);
}

.accordionInputs {
  &[open] {
    .accordionInputs__handle {
      background-color: var(--blue);
      color: var(--white);
      &:after {
        --markerColor: var(--white);
        transform: rotate(180deg);
      }
    }
  }
}
.accordionInputs__handle {
  box-sizing: border-box;
  padding: 0.1em var(--accordionInputsPadding, 1em);
  width: 100%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  white-space: pre;
  align-items: center;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
  min-height: 29px;

  &::-webkit-details-marker {
    display: none;
  }

  &:after {
    $mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:' viewBox='0 0 292.4 292.4'%3E%3Cpath d='M134.84,230.22,4.71,100.09a16.07,16.07,0,0,1,0-22.73L19.88,62.18a16.08,16.08,0,0,1,22.7,0L146.2,165.29,249.82,62.16a16.08,16.08,0,0,1,22.7,0l15.17,15.18a16.07,16.07,0,0,1,0,22.73L157.56,230.22a16.07,16.07,0,0,1-22.72,0Z'/%3E%3C/svg%3E");
    content: "";
    background-color: var(--markerColor, var(--type));
    -webkit-mask-image: $mask;
    mask-image: $mask;
    -webkit-mask-position-y: center;
    mask-position-y: center;
    width: 0.75em;
    height: 0.75em;
    display: block;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--blue);
      color: var(--white);

      &:after {
        --markerColor: var(--white);
      }
    }
  }
}
.accordionInputs__body {
  margin-inline: var(--accordionInputsPadding, 1em);
  box-sizing: border-box;
}
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src/components/accordion/accordion.scss
  • Size: 2.2 KB

Modifiers

Layout

Use .accordion.accordion--ladder to add a dividing line between adjacent accordions:

<details class="accordion accordion--ladder">[...]</details>
<details class="accordion accordion--ladder">[...]</details>
<details class="accordion accordion--ladder">[...]</details>

Alternatively, add .accordionLadder to a container:

<div class="accordionLadder">
  <details class="accordion">[...]</details>
  <details class="accordion">[...]</details>
  <details class="accordion">[...]</details>
</div>

You can add .accordion__handle--link to the <summary> tag to make the handle appear as a “link”. This will apply the link color, set cursor to pointer, and add the link hover color. It will not apply an underline.

<details class="accordion">
  <summary class="accordion__handle accordion__handle--link">
    Accordion Handle
  </summary>
  <div class="accordion__body">
    <p>Lipsum...</p>
  </div>
</details>