Expando: Collapsing Content Blocks

Note: This feature is only available in the Meerkat and Meerkat16 themes.


Overview

The Expando shortcode lets you create collapsible content blocks. Their titles can be clicked once to reveal the associated content, and clicked again to hide it. You can add as many expandos to your page/post as you like.

Hint: You may also group your expandos so that opening one will close the others. See Tab Group for more information.

Demo

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec lectus ante. Quisque dignissim fermentum purus at ornare. In ultricies auctor porta. Vivamus nec cursus dolor. Pellentesque aliquam est sed rhoncus ornare. Donec id erat enim. Nullam nisl turpis, viverra eu ante a, ultrices convallis ipsum. Vestibulum urna magna, dapibus sagittis aliquam ut, egestas sed augue. Aliquam tincidunt metus ac ligula accumsan, sed aliquet odio ultrices. Mauris commodo, tortor in dictum tristique, elit justo mattis tellus, non gravida mi turpis id libero. Nam tortor velit, bibendum eget magna eu, cursus rhoncus ante. In ac eleifend enim. Aenean dictum id leo id aliquet. Mauris accumsan mauris in dolor iaculis cursus. Sed euismod facilisis libero sit amet tincidunt.


The shortcode

The Expando shortcode can be set up 2 ways:

  1. Using the Shortcode Builder interface in visual mode (recommended)
  2. Manually creating the shortcode and attributes in the editor
  • To use the Shortcode Builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor.

    To create the Expando shortcode:

    1. Write the text that will go inside the collapsing box, then highlight it.
    2. Click on the Shortcodes button, located in the 2nd row of your visual editor's toolbar (outlined in orange below). If you only see 1 row of tools, click on the kitchen sink (the last button in the row) to reveal the 2nd row.
    3. Hover over the Format Content menu to reveal its submenu, and select Expando (outlined in red below).Expando menu location
    4. Fill out the form in the dialog popup box. Hovering over the input boxes will reveal hints, helping you fill out the form.
      Title: This text will be used for the bar that's clicked to hide/show the collapsible content.Content: The text you highlighted in step 1 should appear here, as shown below. If you didn't highlight any text before clicking on the tool, you may type it in now.Expando settings dialog
    5. Clicking “OK” will insert the shortcode into the visual editor.

    Editing the shortcode

    In the editor (in both visual and text modes), the shortcode will look something like this:
    [expando title="Lorem ipsum dolor sit amet"]consectetur adipiscing elit. Ut aliquet dui ut varius vehicula. Aenean porta elit lectus, ut sagittis urna sodales nec. Cras non euismod sem. Proin congue scelerisque nisi id malesuada. Vivamus in vehicula velit. Ut aliquam elit et malesuada hendrerit. Vestibulum at est condimentum, cursus diam id, aliquam mauris.[/expando]

    You can edit the shortcode directly in the editor, or you can delete the shortcode, and create a new one using the shortcode builder tool again.

  • Shortcodes can be manually edited in either visual mode or text mode. You can use the code below as a guideline, or copy & paste it, and replace the title & content with more appropriate values.

    To create the demo expando element seen at the top of this page, you need the 3 components below (all are required):

    1. Open expando tag and title

    [expando title="What all editors should know about placeholder text"]
    The title will become the text in the blue bar that is always visible, and can be clicked to hide/show more content. Don't put any HTML tags in the title.

    2. Content

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec lectus ante. Quisque dignissim fermentum purus at ornare. In ultricies auctor porta. Vivamus nec cursus dolor. Pellentesque aliquam est sed rhoncus ornare. Donec id erat enim. Nullam nisl turpis, viverra eu ante a, ultrices convallis ipsum. Vestibulum urna magna, dapibus sagittis aliquam ut, egestas sed augue. Aliquam tincidunt metus ac ligula accumsan, sed aliquet odio ultrices. Mauris commodo, tortor in dictum tristique, elit justo mattis tellus, non gravida mi turpis id libero. Nam tortor velit, bibendum eget magna eu, cursus rhoncus ante. In ac eleifend enim. Aenean dictum id leo id aliquet. Mauris accumsan mauris in dolor iaculis cursus. Sed euismod facilisis libero sit amet tincidunt.
    Any text/html between the open and close expando tags becomes the content that gets revealed/hidden when clicking on the title.

    3. Close expando tag

    [/expando]

    Important! There must be a line break after the closing [/expando] tag.


Image Expandos

You may add a background image to your expando by following these easy steps:

  1. Upload the image to the media library
  2. Copy the URL to this image
  3. Add that URL to the expando using the attribute img_url like this: [expando title="Get Involved" img_url="https://somesite.williams.edu/files/2018/01/750.jpg"]Your content here[/expando]
  • Your content here


Linking to a Specific Expando

By default, the first tab will be selected when you load a page. If you want to link to a page that has a different tab selected, you'll need to append the tag's title to the URL, like this: http://wordpress.williams.edu/tabs/#safari.

It's easy to copy this URL:

  1. Hover over the tab until you see the link icon.
  2. Click the icon to copy the tab's URL to your clipboard.
  3. Paste the link where you need it.