Tabbed Content Editing

collective.tabr allows for easy editing of Plone "tabbed content" using the jQuery Tools Tabs UI tool.

After successful installation, you should see the add-on listed in Plone Site Setup. Enable the add-on, you should see "Tab" and "Default Tab" from the TinyMCE toolbar menu.

However, you might run into minor issues on final display. First make sure jQuery compatibility fixes are applied. In case you need CSS tweaks, try looking for the "tabs" class name. collective.tabr/browser/tabr.js does almost the hard work, and I append 'style="list-style-type: none; margin-left: 0em"' in <ul class="tabs"> to fix the display.

< jq('<ul class="' + wysiwygTabs.TAB_CONTAINER_CLASS + \
 '"><!-- Dynamically generated tab selectors -->l</ul>');
---
> jq('<ul class="' + wysiwygTabs.TAB_CONTAINER_CLASS + \
 '" style="list-style-type: none; margin-left: 0em" \
 ><!-- Dynamically generated tab selectors --></ul>');

By using this visual tool, content editors can ease their job. It goes further by utilizing JavaScript in Plone without knowing HTML details.