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.

Collapsible Grid Items Tab

Here you will choose the type of list, as well as additional advanced settings.

Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:

  • Advanced Search: Do not choose Advanced Search unless you are familiar with writing queries. Build a list using Java API and REST API. Advanced Search accepts a query description, and creates and runs an XPath query.
    • An Advanced Search tab will automatically appear.
    • If desired, the XPath query will filter the result set and extract facets.
    • Query descriptions are made up from a set of predicates.
    • For each predicate type, there is an evaluator component that handles that specific predicate for XPath, filtering and facet extraction.
    • The REST API provides access to these features through HTTP with responses sent in JSON.
  • Child pages: Populate the content of the list with the pages found in a segment of a website.
    • A Child Pages tab will automatically appear. Click the magnifying glass icon to the right of the Parent Page field to select a folder from which to display pages in your list. (If you build your list with child pages, you do not have the option of displaying them in the order of your choice.)

Be careful not to list the parent page here by mistake.
It can create a loop. > Read more

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

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

  • Curated list: Build a list with selected choices. Fixed list requires you to manually add any additional pages to the list.
    • A Fixed List tab will automatically appear. Click the magnifying glass icons to select Web pages to be displayed.
    • Use the Up and Down buttons to specify the order that the Web pages will be displayed in the list. The minus (-) buttons allow you to delete Web pages while the + button enables you to add Web pages.
  • Another list: Populate your list using another previously created list. This is useful if you want to mirror items displayed on another page, while perhaps limiting the amount of items displayed.
    • An Another List tab will automatically appear. Click the arrow at the right of the List Reference field to select another page from which to pull a list to imitate:
      • Click on the field to pull up a browser window of all the pages in your UBCMS site.
      • Select the page containing the list you want to use.
      • The browser will display all usable components on the right hand side of the browser. Choose the desired list and click OK.
  • Search: Use a particular word or phrase to build a list. Any page that contains the searched-for term will be included in the list.
    • Search query: Enter a predetermined unique keyword or phrase; e.g. "ubgreen-event" in our example.
      This is optional, but with no keyword you will display ALL events in the calendar. More complex queries are possible. (See Tips for Building a List Search Query.)
    • Start in: Click the magnifying glass icon to select which page, and subsequent child pages, the search is confined to. Leave the field blank to search all pages in the UBCMS.
  • Tags: Build a list using the tag words assigned to certain pages. (Read more about Tagging Your Shared Content.)
    • A Tags tab will automatically appear. In the Tags field, type the tags you would like to use or select the tags from a drop-down menu by clicking on the downward arrow sign to the right of the field.
      • In the Limit to path field, choose the scope of the list by selecting the page, and subsequent child pages, to which you wish to limit the list. Leave this field blank to populate the list using the content of your entire UBCMS. Web pages with tags matching your selections will then be displayed in your list.
      • Be advised, items in lists built using tags are not sorted in the normal default order even if they all originate in one folder. If you want the items to appear in a specific order, specify that in the Order by field.

New window: Select so each clicked page is displayed in a new browser window.

Order by: There are several ways in which you can order your list:

  • postDate: Arrange by the date the list pages were created if using the News article template or with the Date Created component in any other template. Using postDate without one of these results in a randomized order.
  • jcr:created: Order the list by the date of creation, with the earliest date of creation beginning the list.
  • cq:lastModified: The list will be ordered by the date of modification. The page most recently edited will appear on top.
  • cq:template: The order will be established according to its arrangement in the Page Tree, sorted by template type used on each page.
  • jcr:title: The list is ordered alphabetically by title.
  • You can also delete the default option and leave the field blank to sort the list by its arrangement in the Page Tree.

Reverse order: Check the box to select whether you would like to inverse the order selected in the Order by field.

Unlike other carousels and slide decks, this component cannot be randomized.

Advanced List Options

Start at: Select how many items you would like to skip at the beginning of the list (example: '5' will skip the first four items and begin the list at the fifth item). Left blank, the default value of '1' will result in the list displaying every item in your list. This setting can be useful if you wish to feature several items in one group, perhaps at the top of your news page, or on your homepage, and NOT have them repeated with the rest of your list displayed elsewhere on your site.

Limit: Choose a maximum number of entries (optional).

  • If left blank, the default value is 100; for example, if you leave it blank, no more than 100 items will be available.
  • If you set the Limit value smaller than the Paginate after value, users will never see the next page navigation!

Tip: If you want all items to appear in the list, do not leave the Limit field blank. Instead, enter a value that you anticipate will meet your needs; for example, 200, 500, etc. (The News Center has used 9999 as a 'very large number' because their archives date to 1990.)

Exclude current page: Do not display any entries that link to the page on which the list is shown (optional).

Enable scheduling: Select to enable shared content scheduling.

  • Scheduling can be used to automatically change the content in a list over time.
  • When scheduling is enabled, only pages whose “Featured on/off time” (as set in each page’s Page Properties) will be shown in the list.
  • Scheduled lists can be previewed for a given date and time by right-clicking the list and choosing “Schedule Preview.”
  • Unlike Delayed Activation or Scheduled On/Off Time, Featured On/Off Time does not affect the page’s visibility elsewhere on the site; it is still visible in navigation or by direct link.
  • Pages with “Featured on/off time” set must also be activated.
  • Examples of uses for list scheduling:
    • Hide an application link after a deadline has passed.
    • Switch from one featured image to another in a slideshow each day (set the start time of one item to the end time of another).

Host page: Specify on what page of your site you would like any shared content shown. By default, it will be the current page.

The component opened for editing showing the Advanced list options.

The component opened for editing showing the Advanced list options.

Direct Linking to a Slide

You can link directly to any of the slides in a Collapsible Grid, so that the page loads with that slide's content displayed. The slides are numbered, 1, 2, 3, etc. and these become the anchors for your link.  Add a hashtag (#) + the slide number to the end of the URL.

For example, this would load the page with the third slide revealed on this Demo Site page:


  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 Page Helpful?

(so we can thank you or request more details)
( addresses only please)

On this page:

See An Example:

Related Components:

Last Reviewed:

April 13, 2020