デモ：EPT タブ
EPT：Tabs Drupal モジュールの概要
Extra Paragraph Types (EPT)：Tabs モジュールは、タブ用の新しいパラグラフタイプを作成します。タブのコンテンツには、ブロック、ページ、ビュー（Views）、書式付きテキストを使用できます。タブは jQuery UI Tabs プラグインに基づいており、jQuery プラグイン用のさまざまな設定があります。
EPT Tabs は Drupal.org からダウンロードできます：
https://www.drupal.org/project/ept_tabs
composer require drupal/ept_tabs
EPT Tabs は jQuery UI Tabs プラグインに基づいています：
インストール後、Drupal EPT Tabs モジュールはタブ用の新しいブロックタイプを追加します。
EPT Tabs には、DOM Box、背景色 / 画像 / ビデオ、Edge to Edge 設定など、すべての EPT モジュール機能が含まれています：
https://drupalbook.org/ept/demo
タブのコンテンツには、ブロック、ページ、ビュー（Views）、書式付きテキストを使用できます。タブは jQuery UI Tabs プラグインに基づいており、jQuery プラグイン用のさまざまな設定があります。
EBT Tabs はさまざまなスタイルをサポートしています：
- ヘッダー背景なし
- ミニマリストタブ
- ボタンのようなタブ
- 縦型タブ
- 縦型タブ（回転）
Default settings Tabs
Default settings Tabs
Tab 1 content
Tab 2 content
Without header background
Without header background
Tab 1 content
Tab 2 content
Minimalist tabs
Minimalist tabs
Tab 1 content
Tab 2 content
Vertical tabs
Vertical tabs
Tab 1 content
Tab 2 content
Vertical tabs rotated
Vertical tabs rotated
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.
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
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 content
Tab 2 content
Tab 3 content
Collapsible
Collapsible
You can also disable "Collapsible" setting, then at least one section wil be always opened.
Tab 1 content
Tab 2 content
Tab 3 content
All Closed and Collapsible
All Closed and Collapsible
Tab 1 content
Tab 2 content
Tab 3 content
Disable Tabs
Disable Tabs
Tab 1 content
Tab 2 content
Tab 3 content
Height style: Auto
Height style: Auto
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.
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.
Height style: Fill
Height style: Fill
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.
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.