FinraAccordion

Usage

<finra-accordion>
  <finra-accordion-section title="Basic Example - Section 1">
    <div class="section">
      Mauris faucibus dolor purus, eu lacinia libero cursus ac. Aenean congue lorem ipsum, in venenatis elit ullamcorper id. Nullam purus nulla, luctus et tortor sit amet, ornare pharetra velit. 
    </div>
  </finra-accordion-section>
  <finra-accordion-section title="Basic Example - Section 2">
    <div class="section">
      Quisque orci metus, dictum quis tristique pharetra, ultrices non diam. Sed viverra erat quam, at fermentum justo fermentum sed. 
    </div>
  </finra-accordion-section>
</finra-accordion>
<style>
  .section {
    padding: .75rem 1.25rem;
  }
</style>

Multi

Allow multiple sections to be opened.

<finra-accordion multi="true">
  <finra-accordion-section title="Basic Example - Section 1">
    <div class="section">
      Mauris faucibus dolor purus, eu lacinia libero cursus ac. Aenean congue lorem ipsum, in venenatis elit ullamcorper id. Nullam purus nulla, luctus et tortor sit amet, ornare pharetra velit. 
    </div>
  </finra-accordion-section>
  <finra-accordion-section title="Basic Example - Section 2">
    <div class="section">
      Quisque orci metus, dictum quis tristique pharetra, ultrices non diam. Sed viverra erat quam, at fermentum justo fermentum sed. 
    </div>
  </finra-accordion-section>
</finra-accordion>
<style>
  .section {
    padding: .75rem 1.25rem;
  }
</style>

Custom Header

<finra-accordion>
  <finra-accordion-section>
    <finra-accordion-section-header class="custom-header">
      Custom Header
      <button (click)="item4.toggle()">Toggle</button>
    </finra-accordion-section-header>    
    <div class="section">
      Pellentesque faucibus lorem vitae diam vestibulum, vel suscipit ex fermentum. Nam et libero nec velit condimentum aliquam at consectetur magna. 
    </div>
  </finra-accordion-section>
  <finra-accordion-section title="Basic Example - Section 2">
    <div class="section">
      Quisque orci metus, dictum quis tristique pharetra, ultrices non diam. Sed viverra erat quam, at fermentum justo fermentum sed. 
    </div>
  </finra-accordion-section>
</finra-accordion>
<style>
  .section {
    padding: .75rem 1.25rem;
  }
  .custom--header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: rgb(241, 252, 255);
    border-top: dashed 1px rgb(188, 188, 255);
    border-bottom: dashed 1px rgb(188, 188, 255);
    padding: .75rem 1.25rem;
  }
</style>