Accordion
<!-- Shortcode for accordion -->
<div class="tiva-accordion">
<div class="item active" title="Item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
<div class="item" title="Item 2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
<div class="item" title="Item 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Box Layout
<!-- Shortcode for accordion with box layout -->
<div class="tiva-accordion box">
<div class="item active" title="Item 1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
<div class="item" title="Item 2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
<div class="item" title="Item 3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Custom attributes and icon
<!-- Shortcode for custom attributes and icon -->
<div class="tiva-accordion box icons-plus-square" item-space="20px" item-border="#ff8a23" title-background="#ff8a23" content-background="#fff" content-color="#de935f">
<div class="item" title="Plus Square Icon">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</div>
</div>

Attributes:
  • item-space: Space between items of accordion. Default: 10px.
  • item-border: Color of item's border. Default: #555555.
  • title-background: Background of title. Default: #333333.
  • title-color: Color of title. Default: #ffffff.
  • content-background: Bacground of content. Default: #f7f7f7.
  • content-color: Color of content. Default: #666666.
Icons:
  • icons-plus (Default).
  • icons-plus-square.
  • icons-arrow.
  • icons-arrow-circle.
  • icons-chevron.
  • icons-caret.
  • icons-angle.
  • icons-folder.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.