Collapse

The collapse is used to show and hide content. Buttons or anchors are used to toggle specific elements.

How to import accordion/collapse styles:

In order to use accordions in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/accordion
How to customize accordion/collapse styles:

In order to customize accordions in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/accordion

I'm the first content!

I'm the second content!

I'm the third content!

I'm the fourth content!

I'm the fifth content!

<button
  class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1"
  data-toggle="fds-collapse"
  data-target=".fds-collapse.first"
  data-text="Collapse">
  <span>First Button</span>
  <i class="icon-arrow-down-fill"></i>
</button>
<div class="fds-collapse first">
  <div class="fds-collapse-content">
    <p class="mb--0">I'm the first content!</p>
  </div>
</div>
<button
  class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1"
  data-toggle="fds-collapse"
  data-target=".fds-collapse.second"
  data-text="Collapse">
  <span>Second Button</span>
  <i class="icon-arrow-down-fill"></i>
</button>
<div class="fds-collapse second">
  <div class="fds-collapse-content">
    <p class="mb--0">I'm the second content!</p>
  </div>
</div>
<button
  class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1"
  data-toggle="fds-collapse"
  data-target=".fds-collapse.third"
  data-text="Collapse">
  <span>Third Button</span>
  <i class="icon-arrow-down-fill"></i>
</button>
<div class="fds-collapse third">
  <div class="fds-collapse-content">
    <p class="mb--0">I'm the third content!</p>
  </div>
</div>
<button
  class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1"
  data-toggle="fds-collapse"
  data-target=".fds-collapse.fourth"
  data-text="Collapse">
  <span>Fourth Button</span>
  <i class="icon-arrow-down-fill"></i>
</button>
<div class="fds-collapse fourth">
  <div class="fds-collapse-content">
    <p class="mb--0">I'm the fourth content!</p>
  </div>
</div>
<button
  class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1"
  data-toggle="fds-collapse"
  data-target=".fds-collapse.fifth"
  data-text="Collapse">
  <span>Fifth</span>
  <i class="icon-arrow-down-fill"></i>
</button>
<div class="fds-collapse fifth">
  <div class="fds-collapse-content">
    <p class="mb--0">I'm the fifth content!</p>
  </div>
</div>

Accordion

With some additional classes, the default collapse component is converted to Accordion.

I'm the first content!

I'm the second content!

I'm the third content!

I'm the fourth content!

I'm the fifth content!