<div class="horizontal-collapse">
<a class="btn-floating btn-large btn-floating-primary btn-floating-collapse" aria-label="Hoe kunt u ons bereiken/volgen">
<span class="mdi mdi-message-processing" aria-hidden="true"></span>
</a>
<ul class="expand-horizontal animated">
<li>
<a href="tel:+3114024" aria-label="Bel ons">
<span class="mdi mdi-phone" aria-hidden="true"></span>
</a>
</li>
<li>
<button aria-label="Vind iets in de buurt">
<span class="mdi mdi-near-me" aria-hidden="true"></span>
</button>
</li>
<li>
<a href="mailto:gemeente@nijmegen.nl" aria-label="Mail ons">
<span class="mdi mdi-email" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="https://www.facebook.com/gemeentenijmegen" aria-label="Vind ons op Facebook">
<span class="mdi mdi-facebook-box" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="https://twitter.com/gem_nijmegen" aria-label="Volg ons op Twitter">
<span class="mdi mdi-twitter-box" aria-hidden="true"></span>
</a>
</li>
<li class="btn-floating-wrapper"></li>
</ul>
</div>
A custom component created for Nijmegen.
Be sure to add textual content using aria-label to the anchors or buttons so this will be available to assistive technologies.
Icons should be hidden from screen-readers by applying aria-hidden="true" to the child span mdi element.
To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.
<script>
$('.horizontal-collapse').on('click', '.btn-floating-collapse', function() {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
$(this).parent().find('.expand-horizontal').removeClass('slideInRight').addClass('slideOutRight');
} else {
$(this).parent().addClass('active');
$(this).parent().find('.expand-horizontal').removeClass('slideOutRight').addClass('slideInRight');
}
});
</script>