<div class="horizontal-collapse">
    <a class="btn-floating btn-large btn-floating-primary btn-floating-collapse">
        <i class="mdi mdi-message-processing" aria-hidden="true"></i>
    </a>
    <ul class="expand-horizontal animated">
        <li><a href="tel:+3114024"><i class="mdi mdi-phone" aria-hidden="true"></i></a></li>
        <li><i class="mdi mdi-near-me" aria-hidden="true"></i></li>
        <li><a href="mailto:gemeente@nijmegen.nl"><i class="mdi mdi-email" aria-hidden="true"></i></a></li>
        <li><a href="https://www.facebook.com/gemeentenijmegen"><i class="mdi mdi-facebook-box" aria-hidden="true"></i></a></li>
        <li><a href="https://twitter.com/gem_nijmegen"><i class="mdi mdi-twitter-box" aria-hidden="true"></i></a></li>
        <li class="btn-floating-wrapper"></li>
    </ul>
</div>
  • Handle: @button-horizontal-collapse
  • Preview:
  • Filesystem Path: components/button-horizontal-collapse/button-horizontal-collapse.hbs

Horizontal collapse button

This is a custom component.

Using horizontal collapsible button in HTML

To use the horizontal collapsible button we need a little bit of js to make it.

$('.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');
    }
});