<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>
    <ul class="expand-horizontal animated">
            <a href="tel:+3114024" aria-label="Bel ons">
                <span class="mdi mdi-phone" aria-hidden="true"></span>
            <button aria-label="Vind iets in de buurt">
                <span class="mdi mdi-near-me" aria-hidden="true"></span>
            <a href="mailto:gemeente@nijmegen.nl" aria-label="Mail ons">
                <span class="mdi mdi-email" aria-hidden="true"></span>
            <a href="https://www.facebook.com/gemeentenijmegen" aria-label="Vind ons op Facebook">
                <span class="mdi mdi-facebook-box" aria-hidden="true"></span>
            <a href="https://twitter.com/gem_nijmegen" aria-label="Volg ons op Twitter">
                <span class="mdi mdi-twitter-box" aria-hidden="true"></span>
        <li class="btn-floating-wrapper"></li>

Button Horizontal Collapse

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.

    $('.horizontal-collapse').on('click', '.btn-floating-collapse', function() {
        if ($(this).parent().hasClass('active')) {
        } else {