Use the opening hours accordion component to:
The opening hours accordion is only to be used on detail pages.
The opening hours accordion uses the accordion component with a single expandable item to show or hide a certain type of opening hours (a way of being open) for a certain location.
The opening hours are shown using the opening hours component.
To clearly indicate what type of opening hours (the way of being open) the opening hours accordion hides, the opening hours accordion has a title (heading 3) representing the type of opening hours.
Next to that, the opening hours accordion contains an open today component. This open today component is always visible so that users can quickly see if the location is open today and what the opening hours are for today.
Finally, the opening hours accordion can be repeated for every different type of opening hours (different ways the location can be open). There should be one opening hours accordion per different type of opening hours.
By default, all opening hours accordion components are collapsed.
<div class="opening-hours-accordion">
<div class="opening-hours-accordion__item">
<h3>Appointments</h3>
{% include '@open-today' with {
open: true
} %}
{% set openingHoursMonth %}
{% include '@opening-hours' %}
{% endset %}
{% include '@accordion' with {
buttonText: 'All opening hours',
content: openingHoursMonth
} %}
</div>
</div>
<div class="opening-hours-accordion">
<div class="opening-hours-accordion__item">
<h3>Appointments</h3>
<div class="openinghours-widget" data-type="day">
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-12-21">
<span class="openinghours--date-special-day">Today</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">December</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="08:30" aria-label="08:30">
08:30 h </time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h </time>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<h3>
<button aria-controls="accordion--single--content--1" aria-expanded="false" class="accordion--button">All opening hours</button>
</h3>
<div id="accordion--single--content--1" class="accordion--content">
<div class="tabs opening-hours" data-tabs>
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#opening-hoursweek" aria-controls="opening-hoursweek">
This week
</a>
</li>
<li role="presentation">
<a role="tab" href="#opening-hoursmonth" aria-controls="opening-hoursmonth">
This month
</a>
</li>
</ul>
<div role="tabpanel" id="opening-hoursweek">
<div class="openinghours-widget" data-type="week-from-now">
<div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--list">
<ul class="openinghours--days">
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">14</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">15</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">16</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">17</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">18</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">19</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li class="openinghours--day openinghours--day-open">
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">20</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div role="tabpanel" id="opening-hoursmonth">
<div class="openinghours-widget" data-type="month">
<div vocab="http://schema.org/" typeof="Library" class="openinghours openinghours--calendar">
<div class="openinghours--header">
<button class="openinghours--prev">
Previous
</button>
<div class="openinghours--month">
November 2018
</div>
<button class="openinghours--next">
Next
</button>
</div>
<ul class="openinghours--days">
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Mo
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Tu
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">We
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Th
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Fr
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Sa
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day--day-of-week">Su
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-setsize="30" aria-posinset="1" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">1</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-01">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">1</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="2" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">2</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-02">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">2</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="3" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">3</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-03">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">3</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="4" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">4</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-04">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">4</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="5" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">5</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-05">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">5</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="6" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">6</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-06">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">6</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="7" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">7</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-07">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">7</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="8" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">8</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-08">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">8</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="9" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">9</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-09">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">9</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="10" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">10</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-10">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">10</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="11" tabindex="-1" class="openinghours--day openinghours--day-closed openinghours--day-passed">
<span aria-hidden="true">11</span>
<div class="openinghours openinghours--details openinghours--day-closed openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-11">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">11</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">closed</span>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="12" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">12</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-12">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">12</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="13" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">13</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-13">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">13</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="14" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">14</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-14">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">14</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="15" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">15</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-15">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">15</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="16" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">16</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-16">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">16</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="17" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">17</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-17">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">17</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="18" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">18</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-18">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">18</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="19" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">19</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-19">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">19</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="20" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">20</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-20">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">20</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="21" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">21</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-21">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">21</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="22" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">22</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-22">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">22</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="23" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">23</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-23">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">23</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="24" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">24</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-24">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Saturday">Saturday
</span>
<span class="openinghours--date-day">24</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="12:00" aria-label="12:00">
12:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="25" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">25</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-25">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Sunday">Sunday
</span>
<span class="openinghours--date-day">25</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="22:00" aria-label="22:00">
22:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="00:00" aria-label="00:00">
00:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="26" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">26</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-26">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Monday">Monday
</span>
<span class="openinghours--date-day">26</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="27" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">27</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date" property="validFrom validThrough" datetime="2018-11-27">
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Tuesday">Tuesday
</span>
<span class="openinghours--date-day">27</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="28" tabindex="-1" class="openinghours--day openinghours--day-open openinghours--day-passed">
<span aria-hidden="true">28</span>
<div class="openinghours openinghours--details openinghours--day-open openinghours--day-passed" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-28">
<span class="openinghours--date-special-day">Yesterday</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Wednesday">Wednesday
</span>
<span class="openinghours--date-day">28</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="29" tabindex="0" class="openinghours--day openinghours--day-open openinghours--day-active">
<span aria-hidden="true">29</span>
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-29">
<span class="openinghours--date-special-day">Today</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Thursday">Thursday
</span>
<span class="openinghours--date-day">29</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-setsize="30" aria-posinset="30" tabindex="-1" class="openinghours--day openinghours--day-open">
<span aria-hidden="true">30</span>
<div class="openinghours openinghours--details openinghours--day-open" property="openingHoursSpecification" typeof="OpeningHoursSpecification">
<div class="openinghours--date openinghours--special-day" property="validFrom validThrough" datetime="2018-11-30">
<span class="openinghours--date-special-day">Tomorrow</span>
<span class="openinghours--date-between">, </span>
<span class="openinghours--date-day-of-week">
<link property="dayOfWeek" href="http://schema.org/Friday">Friday
</span>
<span class="openinghours--date-day">30</span>
<span class="openinghours--date-month">November</span>
</div>
<div class="openinghours--content">
<div class="openinghours--times">
<span class="openinghours--status">open</span>
<div class="openinghours--time">
<span class="openinghours--time-prefix">from</span>
<time property="opens" datetime="09:00" aria-label="09:00">
09:00 h
</time>
<span class="openinghours--time-separator">to</span>
<time property="closes" datetime="17:00" aria-label="17:00">
17:00 h
</time>
</div>
</div>
</div>
</div>
</li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
<li aria-hidden="true" class="openinghours--day openinghours--day-disabled"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.opening-hours-accordion {
// children
&__item {
& + & {
margin-top: 1.2rem;
}
}
.opening-hours-wrapper {
margin-bottom: .5rem;
}
.accordion {
&--content {
margin-bottom: 1.2rem;
}
&--button {
font-size: .9rem;
}
}
}