Add collapse functionality

[ArrowBaZ]

Button with title and a hide panel

[matbrgz]

+1

[cord]

The shortcode can be used like this:

[ui-collapse title="MyTitle"]
some content to hide
[/ui-collapse]

[cord]

@rhukster this works great OOTB - please merge

[cord]

When placing collapse into tabs, only the first work.

following an alternativ jquery solution ui-collapse.js which works within tabs as well

$(document).ready(function() {
    $('[data-toggle="collapse"]').click(function(event) {
        event.preventDefault();
        $(this).toggleClass("active");
        cEl = $(this).next();
        if ($(this).hasClass('active')) {
            cEl.fadeIn();
        } else {
            cEl.fadeOut();
        }
    });
});

and ui-collapse.html.twig

<button data-toggle="collapse" data-target="collapse-{{ hash }}">{{ title }}</button>
<div id="collapse-{{ hash }}" class="collapse-wrapper" style="display:none">
    <div class="collapse-inner">
        {{ content }}
    </div>
</div>

[rhukster]

Thanks for reminding me about this! I actually wanted to build a more flexible accordian shortcode rather than a simple collapse shortcode. The accordian shortcode I just added is CSS3 only and doesn't need any JS. Also it can be configured as a traditional accordian, or independent panels. it also has indicator arrows, and can be used to show just one panel i you wish. It kinda makes this PR redundant.