</> cf-expandables docs

view the repository

Theme variables

  • The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Colors

  • @expandable-focus
@expandable_label-text
@expandable_link-text
@expandable__padded-bg
@expandable__padded-bg-hover
@expandable__padded-divider
@expandable-group_header-text
@expandable-group_header-bg
@expandable-group-bg
@expandable-group-divider

Sizing

  • @expandable_link-font-size

JS functions

  • There are a number of available functions that you can call on .expandable elements.

.toggle()

  • Toggles the expandable.

.expand( duration )

  • Expands the expandable.
  • duration
Type: number
The animation duration.
Not required.
Defaults to `$.fn.expandable.calculateExpandDuration` or
`$.fn.expandable.calculateCollapseDuration` if excluded.

.collapse( duration )

  • Collapses the expandable.
  • duration
Type: number
The animation duration.
Not required.
Defaults to `$.fn.expandable.calculateExpandDuration` or
`$.fn.expandable.calculateCollapseDuration` if excluded.

Example usage

  • // HTML
<div class="expandable" id="my-expandable">...</div>

// JS
// (use .get(0) to get the HTML element, that's what the functions
// are bound to)
$('#my-expandable').get(0).expand(); // Opens the expandable
$('#my-expandable').get(0).collapse(); // Closes the expandable
$('#my-expandable').get(0).toggle(); // Toggles the expandable

Barebones expandable

  • This is the barebones structure for expandables that can be used (along with other expanable elements and modifiers) to create custom expandable patterns.
  • In this barebones example there are no visual styles.

Barebones expandable

<div class="expandable">
    <button class="expandable_target" title="Expand content">
        <span class="expandable_cue-open">
            Show
        </span>
        <span class="expandable_cue-close">
            Hide
        </span>
    </button>
    <div class="expandable_content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Neque ipsa voluptatibus soluta nobis unde quisquam
            temporibus magnam debitis quidem. Ducimus ratione
            corporis nesciunt earum vel est quaerat blanditiis
            dolore ipsa?
        </p>
    </div>
</div>
  • Pattern structure
-----------------
.expandable
  .expandable_target
    .expandable_cue-open
    .expandable_cue-close
  .expandable_content
  • Use the button tag for the .expandable_target element to allow for keyboard access.
  • The 'Show' and 'Hide' messages can be customized directly in the HTML by editing the contents of .expandable_cue-open and .expandable_cue-close.
  • The aria-pressed attribute on .expandable_target gets automatically added and updated by JavaScript.
  • The aria-expanded attribute on .expandable_content gets automatically added and updated by JavaScript.

.expandable__expanded (modifier)

  • .expandable__expanded
  • Sometimes you may want the expandable to be open by default. This is as easy as adding the .expandable__expanded modifier to the .expandable block.

Expandable text elements

.expandable_label (element)

Lorem ipsum 
<span class="expandable_label">
    Lorem ipsum
</span>
  • .expandable_label
  • Allows you to add some styled text.

.expandable_link (element)

Lorem ipsum 
<span class="expandable_link">
    Lorem ipsum
</span>
  • .expandable_link
  • Allows you to add some styled text with a link-like look.

Animated cues

.expandable_cue-open/close__animated (modifier)

<div class="expandable">
    <button class="expandable_target" title="Expand content">
        <span class="expandable_cue-open expandable_cue-open__animated">
            <span class="cf-icon cf-icon-down"></span>
        </span>
        <span class="expandable_cue-close expandable_cue-close__animated">
            <span class="cf-icon cf-icon-up"></span>
        </span>
    </button>
    <div class="expandable_content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Neque ipsa voluptatibus soluta nobis unde quisquam
            temporibus magnam debitis quidem. Ducimus ratione
            corporis nesciunt earum vel est quaerat blanditiis
            dolore ipsa?
        </p>
    </div>
</div>
<div class="expandable expandable__expanded">
    <button class="expandable_target" title="Expand content">
        <span class="expandable_cue-open expandable_cue-open__animated">
            <span class="cf-icon cf-icon-down"></span>
        </span>
        <span class="expandable_cue-close expandable_cue-close__animated">
            <span class="cf-icon cf-icon-up"></span>
        </span>
    </button>
    <div class="expandable_content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Neque ipsa voluptatibus soluta nobis unde quisquam
            temporibus magnam debitis quidem. Ducimus ratione
            corporis nesciunt earum vel est quaerat blanditiis
            dolore ipsa?
        </p>
    </div>
</div>
  • .expandable_cue-open__animated
.expandable_cue-close__animated

Expandable header elements

  • Pattern structure
-----------------
.expandable_header
  .expandable_header-left
  .expandable_header-right
  • These additional elements are useful for more complicated expandables that need to convey more information than just 'Show/Hide' before the user expands it.

.expandable_header (element)

  • .expandable_header
  • Creates a full-width container to house information that is always visible.
  • Combine .expandable_header with .expandable_target for a full-width trigger.

.expandable_header__spaced (modifier)

  • .expandable_header__spaced
  • Allows you to add space between .expandable_header and .expandable_content.
  • Inline style usage is for demoing the space between the header and content and should not be used.

.expandable_header-left, .expandable_header-right (elements)

  • .expandable_header-left
.expandable_header-right
  • Allows you to float information left and right.

Padded expandable modifier

.expandable__padded (modifier)

  • .expandable__padded
  • Adds padding and a background color to .expandable_header and .expandable_content.
  • In addition to using the .expandable__padded modifier you also need to make sure you are using .expandable_header.

Expandable groups

Standard expandable group

Expandable group header
<div class="expandable-group">
    <div class="expandable-group_header">Expandable group header</div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 1
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 2
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 3
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
</div>
  • Pattern structure
-----------------
.expandable-group
  .expandable-group_header
  .expandable.expandable__padded
    [...]
  .expandable.expandable__padded
    [...]
  .expandable.expandable__padded
    [...]

Accordion-style group

Expandable group header
<div class="expandable-group" data-accordion="true">
    <div class="expandable-group_header">Expandable group header</div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 1
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 2
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
    <div class="expandable expandable__padded">
        <button class="expandable_header expandable_target" title="Expand content">
            <span class="expandable_header-left expandable_label">
                Expandable Header 3
            </span>
            <span class="expandable_header-right expandable_link">
                <span class="expandable_cue-open">
                    Show
                    <span class="cf-icon cf-icon-plus-round"></span>
                </span>
                <span class="expandable_cue-close">
                    Hide
                    <span class="cf-icon cf-icon-minus-round"></span>
                </span>
            </span>
        </button>
        <div class="expandable_content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Neque ipsa voluptatibus soluta nobis unde quisquam
                temporibus magnam debitis quidem. Ducimus ratione
                corporis nesciunt earum vel est quaerat blanditiis
                dolore ipsa?
            </p>
        </div>
    </div>
</div>
  • <div class="expandable-group" data-accordion="true">
  • Accordions can only show one open expandable at a time.
  • Add the data-accordion="true" attribute to the expandable group to activate the accordion mode.