A tabbed interface is a great way to break a sprawling form into more manageable chunks. Concrete5 already includes css styles that do most of the work, so using tabs within a dialog or block edit form simply involves adding the markup and a little bit of jQuery to make them work.
Markup for the tabs
Giving a list the class ccm-dialog-tabs will show the list as a set of tabs.
Within each list item, an <a> is placed about the content to make the tab into a link. The href has to correspond with the subsequent content id, but with a '#' in front of it. The fragment of php using the t() function is to make the interface compatible with language translations. In practice, whatever titles and ids make sense can be used, as long as the ids match up.
<ul id="tabset" class="ccm-dialog-tabs">
<li> <a href="#tab1content"><?php echo t('Tab 1 Title')?></a></li>
<li><a href="#tab2content"><?php echo t('Tab 2 Title')?></a></li>
<li> <a href="#tab3content"><?php echo t('Tab 3 Title')?></a></li>
</ul>
Markup for content
Each tab corresponds with showing some content. So each of these <div> elements has an id that corresponds to one of the tabs above. Note that the id here must not have the '#' in front of it. It doesn't have to be <div> elements, but they are usually the most convenient to use.
<div id="tab1content">
<!-- More content to show with tab1-->
</div>
<div id="tab2content">
<!-- More content to show with tab2-->
</div>
<div id="tab3content">
<!-- More content to show with tab3-->
</div>
When the html first loads, but before the JavaScript executes, all this content will be shown. There could be a flash of unstyled content. If this happens, css can be added to initially hide them. Either of the following will work (but don't use both)
class="ui-helper-hidden"
style="visibility:hidden;"
jQuery to make the tabs work
The jQuery catches the click event for each of the <a> elements in the list of tabs. When a tab is clicked it locates all the ids referred to by the tabs and hides the associated elements, then it shows the element associated with the tab that has been clicked. At the same time, it adds a class ccm-nav-active to the clicked tab and makes sure none of the other tabs have this class. Finally, it simulates a click of the first tab to make it show when after the html is loaded.
<script type="text/javascript">
$(document).ready(function(){
$('#tabset a').click(function(ev){
var tab_to_show = $(this).attr('href');
$('#tabset li').
removeClass('ccm-nav-active').
find('a').
each(function(ix, elem){
var tab_to_hide = $(elem).attr('href');
$(tab_to_hide).hide();
});
$(tab_to_show).show();
$(this).parent('li').addClass('ccm-nav-active');
return false;
}).first().click();
});
</script>
As of jQuery 1.7 the jQuery 'on' method is preferred over the 'click' shorthand:
$('#tabset').on('click', 'a', function(){....
More about tabs
A similar technique can be used to add tabs to any interface. These tabs use Concrete5 styles to fit in with the Concrete5 dialogs and dashboard. A more sophisticated set of tabs is available with jQuery.ui http://jqueryui.com/demos/tabs/, or for frontend pages and the Magic Tabs add-on.