Tab Cards

With the module "Tab Cards" you can create a tab card view or output the content as an accordion.

Here is an example of how the module could be used on a professor's contact page:

 

• CV

  1986 bis 1991	Studied architecture at the universities of Münster, Bochum, Amsterdam and Massachusetts
  1991 bis 1996	Research associate at the Institute of Civil Engineering at the University of Münster
  1996 bis 2001	Lectureships at the Universities of Münster and Bochum
  ab 2001	Dean of the Faculty of Engineering at the University of Münster

   

• Publications

   

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

  Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.

  In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.

  Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue.

• Teaching

   

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

  Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.

  In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

If you select the module "Tab card area" you will see the following menu:

There you have the option to choose between "Open new tab area", "Change tab map" and "Close tab area". At the beginning you decide for "Open new tab area".

To fill this first tab with content you have to insert another module, for example "Text editor".

The highest-ranking heading is automatically used by the system as the text for the tab. In the example above "Resume" as heading 1.

 

To fill the second tab area with content, add a new module "Tab Map Area" and select "Change Tab Map" from the drop-down menu:

Then you can select again among all modules to add content to the tab area. Repeat this as many times as necessary.

The last tab is then closed with "Close tab area".

Note that all modules within the tab card area must be connected with "Mit nachfolgendem Flexmodul verbinden".

So sometimes a lot of modules can be activated in the editing area (for example, if you use the tabs for a "Person A-Z").

If you want to work with tabs, please make sure that you do not use terms that are too long for the tabs. After a certain length of characters, the tabs automatically become accordions to prevent the text from wrapping incorrectly in the tab.

When planning your page design, keep in mind that tabs are always displayed as accordions in the mobile view.

Accordion area

 

For the structure of an accordion area (the contents are not displayed next to each other but below each other) the same applies as for the tab card area. You only have to select the option "Accordion" in the drop-down field for the first tab card module.

Here is an example:

• CV

  1986 bis 1991	Studied architecture at the universities of Münster, Bochum, Amsterdam and Massachusetts
  1991 bis 1996	Research associate at the Institute of Civil Engineering at the University of Münster
  1996 bis 2001	Lectureships at the Universities of Münster and Bochum
  ab 2001	Dean of the Faculty of Engineering at the University of Münster

   

• Publications

   

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

  Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.

  In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.

  Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue.

• Teaching

   

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

  Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.

  In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.