Virginia Tech®home

Disclosure drawer

A disclosure drawer is essentially three Container components (two inside an outer wrapping one) with classes applied to them. The inner drawers can have any combination of other components you want in them. A "View more" button is added to each inner container in published view that can be customized to say what you want via a class on the outer container. There is also a class to convert all text and the button to white for use on dark container backgrounds. The following information will describe how to use all these features.

Creating a basic disclosure drawer

Drag and drop a Container component into the Featured Content, Body, Related Content (VTx theme), or Footer drop zone

Drag two more Containers into the first, so there are two containers one over the other wrapped by the first one

Click on the lower container inside the outer container and choose Config (wrench icon)

Add vt-drawer-hidden to the CSS Class field

Click the checkmark in the top-right corner of the configuration dialog

Click on the upper container inside the outer container and choose Config (wrench icon)

Add vt-drawer-visible to the CSS Class field

Click the checkmark in the top-right corner of the configuration dialog

Click on the outer container and choose Config (wrench icon)

Add vt-drawer-container to the CSS Class field

Click the checkmark in the top-right corner of the configuration dialog

You can now drag and drop components as needed into the upper and lower containers (vt-drawer-visible and vt-drawer-hidden respectively). Obviously, the things you want displayed when the page loads will go in the upper container, and the hidden items that will display when the "View more" button is clicked will go in the lower container.

Click on the Page Information icon (three stacked sliders) top-left of the open page and choose "View as published" to see what the drawer will look like when the page is published. Test the disclosure drawer and make sure your content looks correctly through the various device widths and adjust as needed.

NOTE: Do not use a disclosure drawer in the right column of a page! It is not designed for the right column and should not be used there regardless as the right column is too narrow to accommodate it.

Customizing the disclosure drawer

The outer wrapping container (vt-drawer-container) can have a custom background color by adding it to the "Common CSS Properties" tab, under the Config dialog for the component where the class was added. Please try to use Virginia Tech brand colors from the brand color utility making sure to have proper contrast with either white or black text and button colors within the drawer.

Changing the button and text colors to white from the default black

Click on the outer container (vt-drawer-container) and choose Config (wrench icon)

Add a space and vt-drawerToggle-light to the CSS Class field
 - CSS classes need to be space separated

Click the checkmark in the top-right corner of the configuration dialog

Changing the button text to say something other than "View more"

Click on the outer container and choose Config (wrench icon)

Add a space and vt-drawerToggleText-your-text-dash-separated-here to the CSS Class field
 - The button text you want just needs to be lowercase and dash ("-") separated

Click the checkmark in the top-right corner of the configuration dialog

NOTE: Don't use too many characters as the button will wrap and possibly display oddly on varying devices. Test the button in "View as published" and make the browser window smaller and see how the button wraps. Adjust the length of the button text as needed.