Skip to main content
Texas Design System

Accordion

Expandable sections that show or hide content on click.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes

Design Guidance
Required Title & content
Limitations Titles should be limited in length to give users just enough information to assist with scanning.

Use aria-expanded="true" on the accordion button to keep an item open by default, and aria-expanded="false" to keep it closed.

Default Accordion

View HTML 
<div class="txds-accordion">
  <div class="txds-accordion__item">
    <button type="button" class="txds-accordion__button" aria-expanded="false" aria-controls="acc-1">
      How do I apply for SNAP benefits?
    </button>
    <div class="txds-accordion__content" id="acc-1" aria-hidden="true">
      <p class="txds-accordion__text">You can apply online through YourTexasBenefits.com or visit your local office in person. Applications are processed within 30 days, or 7 days for emergency situations. For help with your application:</p>
      <div class="txds-accordion__details">
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Email Address</p>
          <p class="txds-accordion__detail-value"><a href="mailto:contact@tdoa.texas.gov">contact@tdoa.texas.gov</a></p>
        </div>
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Phone Number</p>
          <p class="txds-accordion__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></p>
        </div>
      </div>
      <div class="txds-accordion__details">
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Email Address</p>
          <p class="txds-accordion__detail-value"><a href="mailto:contact@tdoa.texas.gov">contact@tdoa.texas.gov</a></p>
        </div>
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Phone Number</p>
          <p class="txds-accordion__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="txds-accordion__item">
    <button type="button" class="txds-accordion__button" aria-expanded="false" aria-controls="acc-2">
      What documents do I need to bring?
    </button>
    <div class="txds-accordion__content" id="acc-2" aria-hidden="true">
      <p class="txds-accordion__text">Bring a valid photo ID, proof of income for all household members, and proof of Texas residency such as a utility bill or lease agreement. Additional documents may be required depending on your situation.</p>
    </div>
  </div>
  <div class="txds-accordion__item">
    <button type="button" class="txds-accordion__button" aria-expanded="false" aria-controls="acc-3">
      Where can I find my local office?
    </button>
    <div class="txds-accordion__content" id="acc-3" aria-hidden="true">
      <p class="txds-accordion__text">Use your zip code on the Office Locator page to find the nearest HHSC office, along with hours and directions. Walk-ins are welcome, but scheduling an appointment is recommended.</p>
    </div>
  </div>
</div>

Bordered Accordion

View HTML 
<div class="txds-accordion txds-accordion--bordered">
  <div class="txds-accordion__item">
    <button type="button" class="txds-accordion__button" aria-expanded="false" aria-controls="acc-b1">
      Am I eligible for WIC?
    </button>
    <div class="txds-accordion__content" id="acc-b1" aria-hidden="true">
      <p class="txds-accordion__text">Texas WIC is available to pregnant women, new mothers, infants, and children under five who meet income guidelines. Contact your local WIC clinic for details:</p>
      <div class="txds-accordion__details">
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Email Address</p>
          <p class="txds-accordion__detail-value"><a href="mailto:contact@tdoa.texas.gov">contact@tdoa.texas.gov</a></p>
        </div>
        <div class="txds-accordion__detail">
          <p class="txds-accordion__detail-label">Phone Number</p>
          <p class="txds-accordion__detail-value"><a href="tel:5555555555">(555)&nbsp;555&#8209;5555</a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="txds-accordion__item">
    <button type="button" class="txds-accordion__button" aria-expanded="false" aria-controls="acc-b2">
      How often do I need to recertify?
    </button>
    <div class="txds-accordion__content" id="acc-b2" aria-hidden="true">
      <p class="txds-accordion__text">WIC benefits must be recertified every 6 to 12 months depending on your category. You will receive a reminder letter before your certification expires.</p>
    </div>
  </div>
</div>

JavaScript Behavior

Add this script to enable toggle behavior:

<script>
document.querySelectorAll('.txds-accordion__button').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var expanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', String(!expanded));

    var content = document.getElementById(this.getAttribute('aria-controls'));
    if (!content) return;

    if (!expanded) {
      content.setAttribute('aria-hidden', 'false');
      content.classList.add('txds-accordion__content--open');
      content.style.height = '0px';
      requestAnimationFrame(function () {
        content.style.height = content.scrollHeight + 'px';
      });
      content.addEventListener('transitionend', function onEnd(e) {
        if (e.propertyName !== 'height') return;
        content.style.height = 'auto';
        content.removeEventListener('transitionend', onEnd);
      });
    } else {
      content.style.height = content.scrollHeight + 'px';
      requestAnimationFrame(function () {
        content.setAttribute('aria-hidden', 'true');
        content.classList.remove('txds-accordion__content--open');
        content.style.height = '0px';
      });
    }
  });
});
</script>

CSS Classes

Class Description
txds-accordion Base accordion container.
txds-accordion__item Individual accordion section with bottom border.
txds-accordion__button Clickable header (H5, 24px bold, primary-60). Use aria-expanded and aria-controls.
txds-accordion__content Collapsible content panel. Toggled via aria-hidden or the --open modifier.
txds-accordion__text Body text inside the panel (20px, gray-70).
txds-accordion__details Flex row of contact detail pairs (email, phone, etc.).
txds-accordion__detail Single detail column with label and value.
txds-accordion__detail-label Extrabold 16px label (e.g. "Email Address").
txds-accordion__detail-value Linked value text (primary-50 underline).
txds-accordion--bordered Variant with a colored left border on each header.