Expandable Section

Basic Usage

The expandable section is a CSS-only component which provides a common mechanism to group content in a panel that can be expanded/collapsed using the caret on the left of the title.

TV, Mobile and Wireline Triple Play No DG

This is some content!

HTML

<div class="t-content" ng-controller="basicExpandableSectionExampleController">
    <div class="c-expandableSection" ng-class="{ 'is-expanded': isExpanded}">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-expander" ng-click="handleExpansion()">
                <inv-icon glyph="'plus-square'" ng-show="!isExpanded"></inv-icon>
                <inv-icon glyph="'minus-square'" ng-show="isExpanded"></inv-icon>
            </div>
            <inv-icon class="c-expandableSection-logo" glyph="'question_mark'"></inv-icon>
            <div class="c-expandableSection-heading">TV, Mobile and Wireline Triple Play No DG</div>
        </div>
        <div class="c-expandableSection-content" ng-if="isExpanded">
            This is some content!
        </div>
    </div>
</div>

Section with Labels & Icons

The expandable section supports the inclusion of various supplemental information, usually in the form of labels or icons. These will be vertically aligned within the heading of the section

TV, Mobile and Wireline Triple Play No DG

Total: $139.00

This is some content!

HTML

<div class="t-content" ng-controller="basicExpandableSectionExampleController">
    <div class="c-expandableSection" ng-class="{ 'is-expanded': isExpanded}">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-expander" ng-click="handleExpansion()">
                <inv-icon glyph="'plus-square'" ng-show="!isExpanded"></inv-icon>
                <inv-icon glyph="'minus-square'" ng-show="isExpanded"></inv-icon>
            </div>
            <inv-icon class="c-expandableSection-logo" glyph="'question_mark'"></inv-icon>
            <div class="c-expandableSection-heading">TV, Mobile and Wireline Triple Play No DG</div>
            <div class="c-expandableSection-controls">
                <div class="c-expandableSection-label">Total: $139.00</div>
                <div class="c-expandableSection-icon">
                    <inv-icon glyph="'exclamation-circle'"></inv-icon>
                </div>
                <div class="c-expandableSection-button u-ml++">
                    <inv-icon glyph="'ellipsis-h'"></inv-icon>
                </div>
            </div>
        </div>
        <div class="c-expandableSection-content" ng-if="isExpanded">
            This is some content!
        </div>
    </div>
</div>

Long Heading Behavior

The heading section of the expandable section will consume the space it has available, but will truncate its contents when it begins to encroach upon the controls section if it is too large.

TV, Mobile and Wireline Triple Play No DG (November - June Special)

Total: $139.00

This is some content!

HTML

<div class="t-content" ng-controller="basicExpandableSectionExampleController">
    <div class="c-expandableSection g-expandableSection--small" ng-class="{ 'is-expanded': isExpanded}">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-expander" ng-click="handleExpansion()">
                <inv-icon glyph="'plus-square'" ng-show="!isExpanded"></inv-icon>
                <inv-icon glyph="'minus-square'" ng-show="isExpanded"></inv-icon>
            </div>
            <inv-icon class="c-expandableSection-logo" glyph="'question_mark'"></inv-icon>
            <div class="c-expandableSection-heading">TV, Mobile and Wireline Triple Play No DG (November - June Special)</div>
            <div class="c-expandableSection-controls">
                <div class="c-expandableSection-label">Total: $139.00</div>
                <div class="c-expandableSection-icon">
                    <inv-icon glyph="'exclamation-circle'"></inv-icon>
                </div>
                <div class="c-expandableSection-button u-ml++">
                    <inv-icon glyph="'ellipsis-h'"></inv-icon>
                </div>
            </div>
        </div>
        <div class="c-expandableSection-content" ng-if="isExpanded">
            This is some content!
        </div>
    </div>
</div>

Non-Expanding

The styles for the expandable section can also be utilized in a non-expanding panel.

Account Balance

This is some content!

HTML

<div class="t-content" ng-controller="basicExpandableSectionExampleController">
    <div class="c-expandableSection is-expanded">
        <div class="c-expandableSection-header">
            <inv-icon class="c-expandableSection-logo" glyph="'question_mark'"></inv-icon>
            <div class="c-expandableSection-heading">Account Balance</div>
            <div class="c-expandableSection-controls">
                <div class="c-expandableSection-button u-ml++">
                    <inv-icon glyph="'ellipsis-h'"></inv-icon>
                </div>
            </div>
        </div>
        <div class="c-expandableSection-content">
            This is some content!
        </div>
    </div>
</div>

In List

Demonstrates how the component can look when used as a list item

This is some content!

HTML

<div class="t-content" ng-controller="listExpandableSectionExampleController as controller">
    <!--The class c-expandableSection-list denotes an expandable item as a list-->
    <div class="c-expandableSection c-expandableSection-list"
         ng-class="{ 'is-expanded': expandableItem.isExpanded}"
         ng-repeat="expandableItem in controller.expandableItems track by $index">
        <div class="c-expandableSection-header">
            <div class="c-expandableSection-heading u-flexItemSized+">
                <div class="u-flex u-flexRow u-flexMiddle">
                    <div class="c-expandableSection-expander" ng-click="controller.handleExpansion(expandableItem)">
                        <inv-icon glyph="'caret-right'" ng-show="!expandableItem.isExpanded"></inv-icon>
                        <inv-icon glyph="'caret-down'" ng-show="expandableItem.isExpanded"></inv-icon>
                    </div>
                    <inv-step-progress-indicator class="u-mr+" status="expandableItem.status" light-theme="true"></inv-step-progress-indicator>
                    <div class="u-flexItemGrow u-textTruncate" ng-bind="expandableItem.title"></div>
                </div>
            </div>
            <div class="c-expandableSection-heading is-field u-flexItemSized" ng-bind="expandableItem.createDate"></div>
            <div class="c-expandableSection-heading is-field u-flexItemSized" ng-bind="expandableItem.completeDate"></div>
            <div class="c-expandableSection-controls">
                <div class="c-expandableSection-button u-ml++">
                    <inv-icon glyph="'ellipsis-h'"></inv-icon>
                </div>
            </div>
        </div>
        <div class="c-expandableSection-content" ng-if="expandableItem.isExpanded">
            This is some content!
        </div>
    </div>
</div>