Easy Tabs en

Provides a reasonably simple framework to create tabbed content in your entities and toggle between tabs, only displaying one block at a time.

Editor Toolkit Recommended

This plugin supports and recommends the Kanka Editor Toolkit. You can install this user script with a browser extension to generate the necessary HTML for various plugins, such as this one. It comes with a dedicated Easy Tabs helper that provides the following benefits:

• Edit existing tab groups and create new ones in a user-friendly interface.
• Add and remove tabs in one or two clicks.
• Reorder tabs via drag-and-drop and rename them without wrestling with Summernote.
• Quickly select which tab’s content you want shown by default and the helper will reposition the HTML for you.

Usage

To create tabs manually, switch to Summernote’s code view and insert the following HTML at the desired position:

<div class="easytabs">
  <div class="easytabs-toggles">
    <a href="#unique-id1" class="easytabs-tab">Tab Name 1</a>
    <a href="#unique-id2" class="easytabs-tab">Tab Name 2</a>
  </div>
  <div id="unique-id1" class="easytabs-content">
    Tab 1 content
  </div>
  <div id="unique-id2" class="easytabs-content">
    Tab 2 content
  </div>
</div>

• You can have as many tabs as you want by adding more "easytabs-tab" anchors and "easytabs-content" containers in their respective sections.
• Make sure to replace "unique-id" with a unique ID for each tab that matches between each anchor and its related container. Note that the one in the anchor must start with a #, but NOT the one in the container.
• The first tab to be displayed by default will be the last easytabs-content, regardless of the toggles’ order. For example, if you have the toggles Tab1, Tab2, Tab3, but your containers are ordered like Tab2, Tab3, Tab1, the content of Tab1 will be displayed by default when no tab is selected. (A little counterintuitive, but necessary for this to work in pure CSS.)

In the editor, a dotted outline will appear around each content area so you can differentiate them better. They are displayed consecutively since tab toggling is not possible within Summernote. If one of your content areas is empty, you can move your pointer over it to show its ID and help tell which tab toggle it corresponds to.

Known Limitations

• If you target a different anchor outside your tab group but on the same page, the default tab will come into focus again. For example, if you toggle Tab 3 open, then click a tab in a different group of tabs on the same page, your first group’s default tab will reappear instead of Tab 3 because only one tab can be active at once across the whole page.
• Due to the way the tabs have to be structured to display a default tab instead of starting off empty, tab toggles cannot be highlighted to show which one is active. I suggest including each tab’s name at the top of its content area to make it clearer which one is currently open.
• When editing the tabs and contents in visual mode, Summernote can sometimes make a mess and break the HTML structure, especially when deleting characters near the beginning or end of an element. Usually, Ctrl+Z can restore the structure to let you try again. If you use the Editor Toolkit, you won’t have to worry about this when it comes to the tab toggles. Editing in code view may be necessary for the tab content in some cases.

Customization

The tabs’ appearance is left very bare by design to integrate with all official themes and most Marketplace themes. It uses the following color variables out of the box, which you can change in your campaign CSS:

.easytabs {
/* Border around tabs (and tabbed sections in Summernote) */
    --tab-border: hsl(var(--bc));
/* Tab background and text colors */
    --tab-background: hsl(var(--s));
    --tab-hover-background: hsl(var(--sf));
    --tab-text: hsl(var(--sc));
/* Tabbed section background */
    --tab-content-background: hsl(var(--b2));
}

Logo by Freepik at Flaticon.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):