feature req for px 2.3.1: collapse / expand / close on panels

[amitai52]

Suggesting to add this ability for panels (connected to buttons on the right of the title)

• close (panel goes away)
• collapse (with class, so it can start collapsed) just the title is displayed, body is hidden
• expand: (from collapsed state) - expand the body back

[smnedelko]

You can easily add this features by your own.

CSS:

.panel-collapse-btn,
.panel-close-btn {
    color: rgba(0,0,0,.3);
}

.panel-collapse-btn:hover,
.panel-close-btn:hover,
.panel-collapse-btn:focus,
.panel-close-btn:focus {
    text-decoration: none;
    color: rgba(0,0,0,.6);
}

Javascript:

$(function() {
    // Collapse feature
    $('body').on('click', '.panel-collapse-btn', function(e) {
        e.preventDefault();

        var $collapseEl = $(this).parents('.panel').find('> .collapse');
        var expanded = !$collapseEl.hasClass('in');

        // Toggle element
        $collapseEl.collapse('toggle');

        $(this)
            .find('> .fa')
            [expanded ? 'addClass' : 'removeClass']('fa-caret-up')
            [expanded ? 'removeClass' : 'addClass']('fa-caret-down');
    });

    // Close feature
    $('body').on('click', '.panel-close-btn', function(e) {
        e.preventDefault();
        $(this).parents('.panel').remove();
    });
});

Markup:

<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">...</span>
        <div class="panel-heading-controls">
            <span class="panel-heading-text">
                <a href="#" class="panel-collapse-btn"><i class="fa fa-caret-up"></i></a>
                &nbsp;&nbsp;
                <a href="#" class="panel-close-btn"><i class="fa fa-times"></i></a>
            </span>
        </div>
    </div>
    <div class="collapse in">
        <div class="panel-body">
            ...
        </div>
    </div>
</div>

[amitai52]

Thanks, this looks good Will you be releasing a new version of PX soon with such updates?

[throny]

Waiting for this in a new version like issue 12? This is like a year old now...