Plethora Plugins

Horizontal tab – responsive accordion with all collapsed initially

To view the responsive accordions on this page, resize your browser to < 1000px

Example 1

The following Tabs or Accordion block has a Horizontal layout with RESPONSIVE BEHAVIOR set to Collapse to accordion, and RESPONSIVE ACCORDIONS: ALL COLLAPSED INITIALLY set to true. The MOBILE BREAKPOINT has been set to 1000px to make it easier to test this just by resizing the browser a bit.

FIRST bit of content

SECOND bit of content

THIRD bit of content


Example 2

If you want to force the accordion to have one (or more!) specific accordion items open by default, click on the Tab block(s) you want shown by default for the mobile accordion display, and check the Accordion Item: Open Initially (Pro) box. For the following example, which has the same settings as example 1 for the Tabs or Accordion block (with all collapsed initially set to true), the second tab is shown by default for the responsive accordion display:

FIRST bit of content

SECOND bit of content

THIRD bit of content


Example 3

You can even have all accordion items expanded by default. For the following example, Auto Close Accordion Items (Pro) has been set to false, and each Tab block has Accordion Item: Open Initially (Pro) checked.

FIRST bit of content

SECOND bit of content

THIRD bit of content