---
title: Accordion
layout: common-ux-layout.hbs
---
<div class="sg-accordions">
  <h3 class="sg-acccordions-heading">Default style</h3>
{{>accordion accordion.data.fields.componentsArea.0.fields}}

  <h3 class="sg-acccordions-heading">Hotel facts style</h3>
  <div class="background-tui-beige-25" style="padding: 24px">
    <div class="hotel-facts">
      {{#withGroup hotel.data.fields.content.goodToKnow (ceil (divide hotel.data.fields.content.goodToKnow.length 2))}}
        <ul class="tui-accordion facts-accordion">
          {{#each this}}
{{>facts_accordion resourceObject=@root/hotel.data.fields.resource.fields.items}}
          {{/each}}
        </ul>
      {{/withGroup}}
    </div>
  </div>

  <h3 class="sg-acccordions-heading">Hotel concept style</h3>
  {{#each hotel.data.fields.content.concepts}}
    {{#if @first}}
{{>hotel_concept this resourceObject=hotel.data.fields.resource.fields.items}}
    {{/if}}
  {{/each}}
</div>
<p>&nbsp;</p>
<h3>Travel schedule <span class="color-tui-red">(this should be replaced by the vue app)</span></h3>
{{>travel_schedule}}


<h3>Aside navigation</h3>
<div class="module-library-block">
  {{>tui_aside_navigation data=tui-aside-navigation}}
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>