# accordions & toggles

## Accordions

![Accordion](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0CFf9GtMBbwcKjL6%2Faccordion.png?generation=1535987996316970\&alt=media)

### HTML

```
<div class="ol-accordion">
  /// accordion items
</div>
```

markyo for an accordion item:

```
<div class="ac-item">
    <div class="item-head">
      <span>--title--</span>
    </div>
    <div class="item-body">
        --contents--
    </div>
</div>
```

### Open when page loads

By default the very first item will be open at page load, but it can be altered by adding `.open` class to one of accordion items, that item will be oppend when the page is loaded, instead of the first item:

`<div class="ac-item open">...</div>`

### Skins

You can choose from 6 color variations by adding these classes to the element.

* `.red-skin`
* `.green-skin`
* `.cyan-skin`
* `.yellow-skin`
* `.dark-skin`
* `.blue-skin`

eg.

```
<div class="ol-accordion red-skin">...</div>
```

## Toggles

Toggles naturally are accordions but the behavior is slightly different. A toggle can be open or close, regardless of other siblings.

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0CFnYHFFqRALPVhM%2Ftoggle.png?generation=1535987996334032\&alt=media)

### HTML

```
<div class="ol-accordion toggle-free">
   /// toggle items
</div>
```

Note that the only difference is the additional `.toggle-free` class.

And a sinlge toggle item would the same as accordion:

```
<div class="ac-item">
    <div class="item-head">
      <span>--title--</span>
    </div>
    <div class="item-body">
        --contents--
    </div>
</div>
```

### Skins

You can choose from 6 color variations by adding these classes to the element.

* `.red-skin`
* `.green-skin`
* `.cyan-skin`
* `.yellow-skin`
* `.dark-skin`
* `.blue-skin`

eg.

```
<div class="ol-accordion red-skin">...</div>
```
