Demo: EPT Tabs

08/10/2023, by Ivan

EPT: Tabs Drupal module overview

Extra Paragraph Types (EPT): Tabs module create a new paragraph type for tabs. Tabs content can be blocks, pages, Views and formatted text. Tabs are based on jQuery UI Tabs plugin and have various settings for the jquery plugin.

You can download EPT Tabs from Drupal.org:

https://www.drupal.org/project/ept_tabs

composer require drupal/ept_tabs

EPT Tabs based on jQuery UI Tabs plugin:

https://jqueryui.com/tabs/

After installation Drupal EPT Tabs module adds new block type for Tabs.

EPT Tabs contains all EPT module features including DOM Box, background color / Image / Video, Edge to Edge settings:

https://drupalbook.org/ept/demo 

Tab content can be blocks, pages, Views and formatted text. Tabs are based on jQuery UI Tabs plugin and have various settings for the jquery plugin.

EPT Tabs content

EBT Tabs supports different styles:

  • Without header background
  • Minimalist tabs
  • Tabs like buttons
  • Vertical tabs
  • Vertical tabs rotated

EPT Tabs styles

 

Default settings Tabs

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Without header background

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Minimalist tabs

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tabs like buttons

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Vertical tabs

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Vertical tabs rotated

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat elit vitae ex tincidunt feugiat. Ut mollis sem in lorem varius, vel facilisis ex pulvinar. Pellentesque ornare felis tellus, id aliquet lacus fringilla id. Proin aliquet euismod diam, ut eleifend arcu volutpat sit amet. Cras iaculis ultricies dolor ac malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue orci vitae dignissim vulputate. Integer commodo turpis nulla, et feugiat mi faucibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Active section

You can select which section should be opened by default. Use "Active section" field to write order number of section. Active section setting is zero based, it means it starts to count from zero. So if you need to open 3rd section by default, you need to type "2" in Active section field. 

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Collapsible

You can also disable "Collapsible" setting, then at least one section wil be always opened.

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

All Closed and Collapsible

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Disable Tabs

Tab 1

Tab 1 content

Tab 2

Tab 2 content

Tab 3

Tab 3 content

Height style: Auto

Tab 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Height style: Fill

Tab 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.