Collapsible Grid Component

Display teasers for other pages in an interactive tabular format.

This component was designed for full-width pages (no sidebars). Performance on narrower pages may be unpredictable.

Using This Component

Add the component to the page. There are two tabs: Collapsible Grid and Collapsible Grid Items.

By default, teaser images from the linked pages are displayed as slides in a grid pattern and when you mouse over a slide, the image 'flips' to display the associated teaser title. When you click a slide, the slide number is now displayed as a placeholder while the full teaser is revealed (title, image and description, plus any list of links that is associated with that page template). The full teaser is displayed below that slide row except for the bottom row whose teasers are displayed above that row.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Collapsible Grid Tab

Number of grid columns: Choose from 3, 4 (default) or 5. The actual number of columns displayed will depend on the space available on the page. ('Grid columns' are not the same as regular page columns.)

Flip grid items: Provide a comma-separated list of slide numbers to declare which, if any, of the slides should be flipped so that the teaser title is displayed first instead of the image. (On mouse-over, the view flips from description to image, or vice versa.)

The component opened for editing showing the main Collapsible Grid tab.

The component opened for editing showing the main Collapsible Grid tab.

Restrictions

  1. This component was designed for full-width pages (no sidebars). Performance on narrower pages may be unpredictable.
  2. Unlike other carousels and slide decks, this component cannot be randomized.

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See An Example:

Related Components:

Last Reviewed:

September 3, 2020