Examples

Examples of the accordion module

Default

Set data-accordion (or data-accordion='single' used as default mode)

<div class="accordion" data-accordion>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 1</span>
    <div class="accordion__item-content">
      Content of item 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 2</span>
    <div class="accordion__item-content">
      Content of item 2.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 3</span>
    <div class="accordion__item-content">
      Content of item 3.
    </div>
  </div>
</div>
  .accordion__item-content {
    display: none;
  }

  .accordion__item {
    &.active {
      .accordion__item-content {
        display: block;
      }
    }
  }
<script type="module">
  import { accordion } from "@lukovio/wskit";
  accordion.run();
</script>
Item 1
Content of item 1.
Item 2
Content of item 2.
Item 3
Content of item 3.

Multiple mode

Set data-accordion="multiple" attribute

<div class="accordion" data-accordion="multiple">
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 1</span>
    <div class="accordion__item-content">
      Content of item 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 2</span>
    <div class="accordion__item-content">
      Content of item 2.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 3</span>
    <div class="accordion__item-content">
      Content of item 3.
    </div>
  </div>
</div>
  .accordion__item-content {
    display: none;
  }

  .accordion__item {
    &.active {
      .accordion__item-content {
        display: block;
      }
    }
  }
<script type="module">
  import { accordion } from "@lukovio/wskit";
  accordion.run();
</script>
Item 1
Content of item 1.
Item 2
Content of item 2.
Item 3
Content of item 3.

Active class mode

Set data-item-active-class="{class}" attribute

<div class="accordion" data-accordion data-item-active-class="active-red">
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 1</span>
    <div class="accordion__item-content">
      Content of item 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 2</span>
    <div class="accordion__item-content">
      Content of item 2.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 3</span>
    <div class="accordion__item-content">
      Content of item 3.
    </div>
  </div>
</div>
  .accordion__item-content {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate3d(20px, 0px, 0px);
  }

  .accordion__item {
    &.active-red	{
      background-color: #CD5C5C;

      .accordion__item-content {
        height: fit-content;
        padding: 10px;
        border: 1px solid #ccc;
        margin-top: 5px;
        background-color: #ddee;
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
        transition: opacity 1s, transform 0.5s;
      }
    }
  }
<script type="module">
  import { accordion } from "@lukovio/wskit";
  accordion.run();
</script>
Item 1
Content of item 1.
Item 2
Content of item 2.
Item 3
Content of item 3.

Full functionality

Set all of attributes

<div class="accordion" data-accordion="multiple" data-item-active-class="active-red">
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 1</span>
    <div class="accordion__item-content">
      Content of item 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 2</span>
    <div class="accordion__item-content">
      Content of item 2.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <span class="accordion__item-title">Item 3</span>
    <div class="accordion__item-content">
      Content of item 3.
    </div>
  </div>
</div>
  .accordion__item-content {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate3d(20px, 0px, 0px);
  }

  .accordion__item {
    &.active-red	{
      background-color: #CD5C5C; 
  
      .accordion__item-content {
        height: fit-content;
        padding: 10px;
        border: 1px solid #ccc;
        margin-top: 5px;
        background-color: #ddee;
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
        transition: opacity 1s, transform 0.5s;
      }
    }
  }
<script type="module">
  import { accordion } from "@lukovio/wskit";
  accordion.run();
</script>
Item 1
Content of item 1.
Item 2
Content of item 2.
Item 3
Content of item 3.