Using Shortcodes

UBC has created shortcodes that can be used on all of its websites. It makes creating many of our design elements much easier. The three main shortcodes we use are columns, tabs and accordions.

Columns

The column shortcode is used all over the site to help organize pages into vertical columns. It is incredibly simple to use and there is a detailed explanation of how to use it in the links above. The page is split up into 12 equal sections along the width of the page. If you want to make a column, you just need to use specify how wide you want each column of that row to be. Once you add up to a width of twelve, any new column will appear below. For example:

Tabs

The tab shortcode is used on the site to create tabs on a page to hide/display info to keep the page length shorter. It's very easy to use and doesn't require any javascript to work. Usage:

[tabs]
 [tab title="tab1"]
    tab 1 content
 [/tab] 
 [tab title="tab2"]
    tab 2 content
 [/tab]
[/tabs]

Accordions

The accordions are marginally more complicated than the columns. This is partially due to the fact that they require javascript for them to work.

For accordions to stay collapsed when the page loads (i.e. the first accordion does not open automatically), add the parameters collapsible=true and active=false, i.e., [accordions collapsible=true active=false].

See below, for example:

[accordions collapsible=true active=false]
 [accordion title="section 1"]
  content
 [/accordion]
 [accordion title="section 2"]
  more content
 [/accordion]
 [accordion title="section 3"]
  even more content
 [/accordion]
[/accordions]

The below code will display the first accordion as 'open' as this is the default behavior of accordions

Usage:

[accordions]
 [accordion title="section 1"]
  content
 [/accordion]
 [accordion title="section 2"]
  more content
 [/accordion]
 [accordion title="section 3"]
  even more content
 [/accordion]
[/accordions]