Skip to main content
Donate to the Python Software Foundation or Purchase a PyCharm License to Benefit the PSF! Donate Now front page like tabs user editable

Project description


Kupu Tabs enables end user editable like front page tabs in WYSIWYG editors.

This is a generic Javascript/CSS library and can be pluggd in to any WYSIWYG editor. Currently Kupu is supported.

Benefits and use cases

  • Where there is plenty of content on the page, but splitting it up is unsuitable and we do not want the user navigate away from the page
  • Suitable for content where the reading order is not critical
  • No page loads - better user experience
  • Fact pages ( front page)
  • Data sheets
  • Accessibility - if Javascript is not supported renders as a normal page
  • Printability - prints as a normal page


Install via buildout

eggs =
zcml =

Usage - Plone

Open any Kupu editable content.

Write a tab name and choose “Tab” as its style from Kupu style drop down.

All text after Tab until the next Tab section or the end will be placed inside a tab container. Tab’ed text will be placed inside a tab container.

You can choose which tab is open by default with Tab (open by default) style.

There is two example style files: kuputabs.css.dtml for any Plone theme (variable colors) and kuputabs2.css which is more generic one.

Usage - Generic HTML

Create a container DIV for your content. Usually this is #content or similar and already provided your CMS/blog/whatever.

Add class “kuputab-tab-definer” for <h2> elements you want to be tabs. Add class “kuputab-tab-definer-default” for the tab which is open by default.

Include kuputabs.js on your page. Include kuputabs-alternative.css stylesheet or create your own.


Under the hood

When the page is loaded in the view mode, Javascript parses all kuputabs-tab sections and builds a tab container from them. If Javascript is disabled the content will appear under normal Subheading styles.

There is an important distinction with two kind of CSS classes

  • kuputab-tab-definer is h2 element which marks the beginning of the tab
  • all content until the end of kuputab-tab-definer parent element or next kuputab-tab-definer goes to this tab
  • kuputab-tab-definer content is mutated to kuputab-tab-container which is placed at the bottom of kuputab-tab-definer container element

document.designMode attribute is used to determine whether the visitor views the page or is it under WYSIWYG editor.


Mikko Ohtamaa

Twinapex Research, Oulu, Finland - High quality Python hackers for hire


Thanks to our fabulous sponsors.

London School of Marketing.

Project details

Release history Release notifications

This version
History Node


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
collective.kuputabs-0.1.tar.gz (9.3 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page