Virginia Tech® home

Multi-Tabs and Accordion component

WARNING: There is a known issue with the Multi-Tabs/Accordion component where changing the order of the tab/fold headings does not migrate the content associated with that tab/fold and content will get our of order with the headings. Before you start populating the Multi-Tabs/Accordion component make sure you know exactly what's going in it and the order. You can drag and drop the content to move it after the change, but this can be tedious for large amounts of pre-populated content.


The Multi Tabs / Accordion component is used to create content panels that are hidden by a tab or fold disclosure pattern.

The Title and Options configuration dialog contains the following options:

  • Component Title - text input field that does not display for this component but useful for giving the component a title for keeping track of what it is used for on the page
  • CSS Class - text input field for custom CSS and/or utility classes
  • Type - select pulldown used to choose between Accordion or Tab disclosure pattern
  • *NEW* Heading size - select heading tag level, H2, H3, H4, H5, or H6 for heading text.
  • Headings
    • Add - button used to add heading fields and content panel drop zones to the component

 

Multi Tab / Accordion component
In the configure window, select the style - Accordion or Tab - from the pull-down menu. Add a heading to each accordion or tab by clicking "Add" in the Headings area.

Copy-Paste Examples (link to this page in author)

Default color

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

Additional colors via classes

vt-accordion-black

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

vt-tab-black

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

vt-accordion-orange

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

vt-tab-orange

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

vt-accordion-maroon

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

vt-tab-maroon

This is accordion and tab content. It can be any component in here, including another accordion/tab component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, sapien ut sodales scelerisque, nulla sapien euismod erat, ut dictum lacus augue eget nibh. Nullam pellentesque eleifend magna, in consectetur sem luctus quis. Curabitur rhoncus mauris ac tortor sodales rhoncus. Integer vel lacus tempor, vehicula eros nec, imperdiet arcu. Fusce in sodales magna. Donec non odio quis ipsum consectetur finibus. Quisque in hendrerit ante, at fringilla sapien. Etiam in feugiat ipsum. Sed feugiat dui sit amet sapien euismod pharetra. Morbi et odio lacinia, bibendum turpis vitae, fermentum nibh. Fusce congue enim et eros rutrum, ac pellentesque sem volutpat. Aenean euismod nisl nibh, scelerisque condimentum purus lobortis a. Nullam at lectus vitae mi cursus vestibulum ac at dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at porta quam, at imperdiet nisi. Mauris eu lorem neque. Donec consequat, velit et convallis euismod, dolor leo vestibulum est, nec mattis metus est vel erat. Cras mollis luctus ornare. Aliquam blandit nec turpis et aliquet. Proin libero dui, imperdiet finibus nisi eu, tempor iaculis mauris. Aenean molestie mi magna. Proin feugiat vitae est convallis tempor. Nulla et quam enim. Nam convallis feugiat ante eget aliquet. Morbi est urna, sodales sed maximus et, suscipit sed dui. Duis sed varius diam, vel euismod ligula. In convallis, dolor non aliquam condimentum, nisl risus blandit erat, quis facilisis risus leo ac ex. Fusce commodo mi ac ante pellentesque, nec dignissim diam dictum.

The multi-tab and accordion component displays content using a tab or fold style. This component presents two alternatives to display content.

Features

  • The user may switch between two different designs
  • Tabs or accordion headings may contain any component (including the multi tab / accordion component)
  • Tabs and headings can be deleted
  • Reordering requires recreating headings

Dialog Properties

Title and Options

  1. Component Title - Title of Component
  2. CSS Class - CSS class to be applied to the component
  3. Type - Choose the desired display type
    • Accordion - (Default) A vertical list of headings which uses a sliding animation to disclose the content
    • Tab - A tabbed interface that switches between panels of information when the tab is clicked
  4. Heading Size - select the appropriate heading level (HTML tag)
  5. Headings - add headings to the multi tab / accordion group. They may be deleted and reordered.

CSS Classes

  • vt-accordion
  • vt-accordion-trigger
  • vt-accordion-panel
  • vt-hide
  • vt-tab-list
  • vt-tab-content
  • vt-tab-group