Entry Tabber

This plugin offers a more convenient alternative to my Easy Tabs to generate tabbed content in entry descriptions and articles. In addition to being simpler to create, the resulting tabs have better interactivity as well as support for screen readers and keyboard-based navigation. And since it requires no visible markup, your content will still look normal if you remove the plugin or if your campaign is no longer Premium.

Note that in other areas like dashboard widgets and the map sidebar, your content will not be tabbed and will flow as you see it in the editor.

Step 1: Apply the property kit to the entry

This plugin does not include any properties, but applying the kit will activate its functionality on the entry.

Step 2: Create an article

Create a new article, and in the Article layout dropdown, select Properties. This will inject the plugin’s script into the Overview page of the entry. Give your article a title, check that all settings are as desired, and save. Once activated, the article will be invisible in your Overview, but you can edit or delete it via a new button at the bottom of the left-hand entry menu.

Step 3: Mark your tab groups

In the HTML view of the editor, you will need to insert two HTML tags to indicate where the tabs begin and end. This allows the plugin to identify multiple groups of tabs in any given page. To do so, insert div elements with the class tabber-start or tabber-end, respectively. The first one can also have a second class to indicate which heading level to use for tab titles (h1 to h6, defaulting to h1 if not specified). Note that all tab titles must be at the same heading level, and any other headings will be included in the tab’s content. The result would look something like this:

<div class="tabber-start h3"></div>
<h3>Tab Title 1</h3>
<p>Some content.</p>
…
<div class="tabber-end"></div>

Customization

The appearance of the tabs is left intentionally simple to integrate with most themes, but you can target the following classes in your campaign CSS to personalize them:

.tabber /* Main container */
.tab-head /* Title row, each one a button */
.tab-head button:is([tabindex="0"], :hover) /* Active or hovered tab button */
.tab-panels /* Container for tab contents, each one a div */

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