No notes defined.
{% set Content %}
<ul class="content links">
<li>
<strong>NL</strong>
</li>
<li>
<a href="#" hreflang="en" title="Continue in English" lang="en">
EN </a>
</li>
<li>
<a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
FR </a>
</li>
<li>
<a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
DE </a>
</li>
</ul>
{% endset %}
{% if accordion %}
<div class="language-switcher accordion">
<button aria-controls="{{ id | default('language_switcher_content') }}"
aria-expanded="false"
class="toggle accordion--button">
NL
</button>
<div id="{{ id | default('language_switcher_content') }}" class="accordion--content"
aria-hidden="true">
{{ Content }}
</div>
</div>
{% else %}
<div class="language-switcher">
{{ Content }}
</div>
{% endif %}
<div class="language-switcher accordion">
<button aria-controls="language_switcher_content" aria-expanded="false" class="toggle accordion--button">
NL
</button>
<div id="language_switcher_content" class="accordion--content" aria-hidden="true">
<ul class="content links">
<li>
<strong>NL</strong>
</li>
<li>
<a href="#" hreflang="en" title="Continue in English" lang="en">
EN </a>
</li>
<li>
<a href="#" hreflang="fr" title="Poursuivez en français" lang="fr">
FR </a>
</li>
<li>
<a href="#" hreflang="de" title="Weiter auf Deutsch" lang="de">
DE </a>
</li>
</ul>
</div>
</div>
{
"accordion": true,
"id": "language_switcher_content"
}
.language-switcher {
display: flex;
position: relative;
justify-content: flex-end;
.accordion--button {
@include bold-text;
display: flex;
align-items: center;
border: 0;
background: transparent;
font-size: .8rem;
cursor: pointer;
}
.accordion--content {
position: absolute;
top: 100%;
right: 0;
margin-top: .5rem;
transition: max-height .3s ease-in-out;
border-radius: border-radius('radius-1');
background: color('white');
z-index: z('language-switcher');
}
.content {
padding: .4rem 1.6rem 0 .8rem;
}
}