Accordion & Tabbed Rows

The login area for Cascade is https://tamiu.cascadecms.com/.

Choosing the Best Type

Accordions and Tabs allow users to display data in condensed space. These two methods are a popular way of displaying sections within a page. Each of them have their advantages, so it's up to you as a content manager to decide which would better serve the page's purpose.

Accordions are a useful when you want to toggle between hiding and showing large amounts of content. In addition, if you have multiple topics where size will be modified, accordions are the better option since they expand vertically.

ProTip: Accordions are perfect for Frequently Asked Questions (FAQ) sections.

Tabs are best used when there are only 2 - 5 static topics needing to be sectioned off. Having each topic displayed for the user at the top of the tabbed section is a great advantage of a tabbed row.

Switching to sectioned rows

Switching into an accordion or tabbed row can be done easily in Cascade. To do so, scroll to the beginning of the row that you would like to modify and change its Type accordingly by selecting either the "Tabbed" or "Accordion" options.

Adding an Item

Much like a standard Cascade row, an accordion/tabbed item can be added by click on the green + sign on the right hand side of the row (shown in the image above).

Filling out an Item

The heading of an Accordion/Tabbed item is a good indicator as to what type of information will be available to the user upon clicking.

The content of an item uses the same type of editor as standard Cascade row-- this means any formatting or media can be added to individual items!

Accordion Example

Title #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt, turpis at feugiat volutpat, sapien eros accumsan felis, et aliquet eros orci quis purus. Ut diam orci, viverra vitae dictum at, suscipit ut diam. Suspendisse interdum tortor id dui sodales venenatis. Nulla lacinia urna et arcu faucibus egestas. Aliquam ut aliquam felis. Aliquam erat volutpat. Nunc vel erat ex. Nullam dapibus pulvinar nibh vitae tincidunt. In sollicitudin sodales orci ut venenatis. Nunc et viverra elit, quis consectetur sem.

Title #2

Cras ultrices nibh dui, in euismod est mollis a. Nulla facilisi. Nunc eget neque lacus. Mauris bibendum augue ipsum, id consectetur sem fringilla ac. Curabitur rhoncus facilisis nunc, ac ullamcorper tellus lobortis at. Nulla facilisi. Aliquam fringilla posuere pellentesque. Etiam tempor auctor metus at commodo. Proin posuere, est ut lacinia facilisis, neque mi cursus ipsum, ac mattis augue ligula eget enim. Nunc quis libero quis metus tempor porta. Mauris aliquet nibh massa, sit amet hendrerit libero faucibus viverra.

Title #3

In eu lorem ullamcorper, imperdiet quam sit amet, rhoncus enim. Duis vitae leo augue. Ut eleifend sodales odio eget rhoncus. Vivamus non tortor blandit, facilisis risus quis, gravida orci. Nam consequat viverra tempor. Pellentesque tempor velit risus, vel pretium odio convallis et. Donec id ipsum quis magna facilisis tempus. Sed bibendum, purus at vulputate fermentum, nisl libero vehicula nisl, eget fringilla odio metus id eros. Proin hendrerit at ligula in feugiat. Cras est lorem, venenatis non dolor quis, tincidunt pretium risus. Nullam in lectus hendrerit, pharetra neque vitae, vulputate nunc. Pellentesque accumsan blandit libero, ac scelerisque tortor.

Title #4

Curabitur fringilla efficitur finibus. Vivamus eget nisl mattis quam elementum aliquam. Pellentesque sagittis posuere ante, non suscipit velit pharetra quis. Proin non ligula placerat, aliquet libero ac, varius nisi. Nam tincidunt finibus posuere. Duis vehicula vel dolor aliquam molestie. Quisque vitae arcu mi. Fusce consectetur egestas hendrerit. Integer cursus nulla metus, a euismod neque porttitor eu. Cras vehicula, enim eu pellentesque placerat, massa nisl tristique leo, in auctor sem est sit amet sapien. Suspendisse sed sapien molestie, vestibulum eros in, bibendum nisi. Duis facilisis rhoncus erat lobortis venenatis. Integer ligula orci, ullamcorper eget est eu, lobortis viverra velit. In sed ullamcorper dolor, rhoncus accumsan magna. Maecenas ut massa non neque aliquam tincidunt at vitae massa.

Tabbed Example

Donec id ipsum quis magna facilisis tempus. Sed bibendum, purus at vulputate fermentum, nisl libero vehicula nisl, eget fringilla odio metus id eros. Proin hendrerit at ligula in feugiat. Cras est lorem, venenatis non dolor quis, tincidunt pretium risus. Nullam in lectus hendrerit, pharetra neque vitae, vulputate nunc. Pellentesque accumsan blandit libero, ac scelerisque tortor. Donec eu felis ut tellus pharetra ultrices ultrices eget augue. Sed vel dapibus enim. Fusce ultricies ac purus a feugiat.

Maecenas nisl ipsum, eleifend nec laoreet eu, placerat a mauris. Curabitur vel nisl malesuada, mattis nunc in, tincidunt nunc. Nulla facilisi. Aliquam laoreet diam ut lorem dignissim, at finibus dolor consequat. Mauris dui leo, volutpat pellentesque sodales vitae, accumsan quis nisl. Cras consectetur ante ut mi porta faucibus. Duis congue pretium tellus sed auctor. Nullam sit amet rhoncus nisl, non dictum massa. Fusce dapibus eu sem id sollicitudin. In pharetra ut nunc vel vestibulum. Etiam consectetur vestibulum suscipit. Integer eleifend lacus eu metus bibendum aliquam.

Cascade Guide