Features

DesignPlus CidiLabs Button Tabs Vertical is a feature within the DesignPlus toolset (often used with Canvas LMS) that allows instructors to create a vertical navigation menu to display content [1, 2]. This component organizes information into clickable, tabbed sections arranged vertically on the left, with corresponding content appearing on the right.

• Vertical Navigation: Tabs are organized vertically, which can be useful for displaying multiple, distinct, and extensive content sections in a organized layout.
• Interactive Tabs: Students click on a tab to display the associated content, making it an interactive tool for organizing course materials.
• DesignPlus Integration: As part of CidiLabs' DesignPlus, this component allows for easy creation, styling, and customization of the tabbed interface without requiring advanced HTML knowledge.
• Structure: It typically includes a "Tabs" container and individual "Tab" items that can be added or removed.
• Use Case: Ideal for organizing lengthy content, such as a course syllabus, multiple weekly learning objectives, or varied resources, in a compact, organized manner.

It is designed to enhance user experience by reducing scrolling and keeping content organized within a single page. DesignPlus (by Cidi Labs) Vertical Button Tabs are an interactive, accessible, and space-saving content organization tool in the Canvas Learning Management System. They allow instructors to display information in separate, clickable vertical panels, with the tab navigation located on the left and the corresponding content displayed to the right.

• Vertical Orientation: Tabs are arranged vertically on the left side, which is effective for managing a large number of tabs (7 or more) without cluttering the screen horizontally.
• Interactive Functionality: Users click on a vertical tab to instantly load the corresponding content in the right-hand panel without needing to navigate to a new page.
• Accessible Design: These tabs are designed to be WCAG-compliant, providing an accessible way to hide and show content.
• Customizable Styling: Instructors can change the active and hover colors, as well as customize button text and add icons.

  Code Snippet

Canvas Page Wrapper

If you are pasting this into a page that already has work in it, you will likely already have a wrapper in place. If you are starting with an empty page, you will need to add this wrapper. Be sure to place your end div at the end of the code.

<div id="dp-wrapper" class="dp-wrapper dp-flat-sections">

Code Snippet

This is the template code for this activity.

      <div class="dp-panels-wrapper dp-tabs-buttons-vertical dp-panel-active-color-dp-secondary dp-panel-color-dp-primary">
        <div class="dp-panel-group">
            <h3 class="dp-panel-heading ">Panel 1</h3>
            <div class="dp-panel-content ">
                <p>Panel 1 Content.</p>
            </div>
        </div>
        <div class="dp-panel-group">
            <h3 class="dp-panel-heading ">Panel 2</h3>
            <div class="dp-panel-content ">
                <p>Panel 2 Content.</p>
            </div>
        </div>
    </div>
    <p>&nbsp;</p>