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

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

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

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.