<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>

Button Horizontal Collapse

A custom component created for Nijmegen.

Accessibility

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.

Using

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>