Latest version 1.0
Released 10 months ago
Updated for Kanka 2.0, with support for Theme Builder colors out of the box. See plugin description for how to customize colors independently from your theme.
Provides a reasonably simple framework to create tabbed content in your entities and toggle between tabs, only displaying one block at a time.
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:
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>
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.
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):
Released 10 months ago
Updated for Kanka 2.0, with support for Theme Builder colors out of the box. See plugin description for how to customize colors independently from your theme.