Pros and Cons

Tabs and accordions hide Content Blocks from users until they choose to view that content. This is both good and bad. Weigh the pros and cons of hiding content before choosing either layout option:

Pros

  • Users can choose to view the content that is relevant to them and avoid the content that is irrelevant to them.
  • Pages full of content can feel less overwhelming because less is visible.

Cons

  • Clicking and tapping requires more of a user's time and effort than scrolling.
  • Frustration can occur when users must open multiple tabs/accordions before finding the content they need.

Tabs vs. Accordion

Choose Tabs when...

  • You only have 2-3 Content Blocks in your Section. If the tabs are wrapping across multiple lines (check on a mobile device), an accordion is a better choice.
  • One Content Block is more important than the rest. In a tabbed layout the first Content Block (tab) is open and visible by default.

Choose Accordion when...

  • You have many Content Blocks in your Section.
  • Your content headings are longer and would cause tabs to wrap over multiple lines (check on a mobile device).
  • You're ok with the content of every Content Block being hidden by default.

Create tabs and accordions

Options for setting your section layout as Tabs or Accordion in Cascade
  • Choose Tabs or Accordion as the Content Blocks layout of your Section.

Each Content Block will become its own tab or accordion item.

Tabs and accordions both require the Content Blocks to have unique content headings. Without content headings, there's nothing for a user to click on or tap.

Tabs example

This is a right-aligned image inside a tab

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

  • At pri aliquid appetere
  • eu nec quodsi doctus
  • mei brute cetero epicuri no
This is media inside a tab

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

Accordion example

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

  • At pri aliquid appetere
  • eu nec quodsi doctus
  • mei brute cetero epicuri no

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

  • At pri aliquid appetere
  • eu nec quodsi doctus
  • mei brute cetero epicuri no
This is media inside an accordion

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

Combine layouts in a section

There may be times when you want multiple layout configurations in one section. This section is an example, where some introductory content exists above the accordion below.

To combine layouts:

  • Create a separate section for each layout style that you want to use. This section is a Normal layout and the section below is an Accordion layout.
  • Only put a Section heading on the first section. This way both sections appear as as one to the user, but multiple layouts are combined.

Lorem ipsum dolor sit amet, at pri elit consequat scriptorem, pro aperiam exerci deleniti scaevola efficiantur id. Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

Ea pri elit movet mollis, eu nec iuvaret argumentum efficiendi, modus meliore invidunt no has. Ius ferri exerci epicuri et, per unum modus iusto ad. Est ad errem congue, cu modus liber duo. Vivendo probatus inimicus vel in, ei congue epicurei volutpat nec. Ad est intellegebat conclusionemque, ne has moderatius neglegentur.

  • At pri aliquid appetere
  • eu nec quodsi doctus
  • mei brute cetero epicuri no