Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseDefaultOpen Only One per timeDisabledAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsTabsTagToastToolip
Utilities
Styleguide

Accordion | Collapse

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Attention: the use of the components needs the squid.js included in the project
Attention + 1: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation

Default

To change default color use background-:color on collapse-title

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3
<div class="accordion" data-accordion>
  <div class="collapse"> 
    <p class="collapse-title">
      <!-- Text Title or HTML -->
      <span class='icon'>
        <!-- Icon Optinal -->
      </span>
    </p>
    <div class="collapse-body">
      <!-- HTML Content -->
    </div>
  </div>
</div>

Open Only One per time

Just add only-one to accordion container

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3
<div class="accordion only-one" data-accordion>
  <div class="collapse"> 
    <p class="collapse-title">
      <!-- Text Title or HTML -->
      <span class='icon'>
        <!-- Icon Optinal -->
      </span>
    </p>
    <div class="collapse-body">
      <!-- HTML Content -->
    </div>
  </div>
</div>

Disabled

Just add collapse-disabled to collapse container. Also collapse-loading force the close de collapse-body

Title 1

Content 1
<div class="accordion" data-accordion>
  <div class="collapse collapse-disabled"> 
    <p class="collapse-title">
      <!-- Text Title or HTML -->
      <span class='icon'>
        <!-- Icon Optinal -->
      </span>
    </p>
    <div class="collapse-body">
      <!-- HTML Content -->
    </div>
  </div>
</div>