@cagov/step-list v1.0.11

Step by step list component

This custom element provides animated expansion and contraction inside a list with show/hide links. It is designed for use with the Alpha CA.gov design system

Sample markup

<cwds-step-list>
  <ul class="list-group list-group-flush">
    <li class="list-group-item unstyled list-group-item-action">
      <button type="button" class="step-description">
        <span class="list-number">1</span>Decide what type of contractor you need
      </button><span class="show">Show</span><span class="hide">Hide</span>
      <div class="details">
        <span class="step-interior">
          <p>Ite Content Here...</p>
        </span>
      </div>
    </li>
    <li class="list-group-item lead unstyled list-group-item-action">
      <button type="button" class="step-description">
        <span class="list-number">2</span>Check if you need a building permit
      </button>
      <span class="show">Show</span><span class="hide">Hide</span>
      <div class="details">
        <span class="step-interior">
          <p>Ite Content Here...</p>
        </span>
      </div>
    </li>
  </ul>
</cwds-step-list>