AUI Tabs

## Macro name: aui-tabs-container
## Macro title: AUI Tabs Container
## Description: A container within which to group AUI Tabs
## Categories:  Confluence content
## Macro has a body: Y
##
## Developed by: David Simpson <[email protected]>
## Date created: 2016-10-19
## Installed by: Your Name
##
## @noparams

#set( $uniqueId = $action.dateFormatter.calendar.timeInMillis )

<div id="aui-tabs-$uniqueId" class="dvdsmpsn user-macro aui-tabs horizontal-tabs">$body</div>


<style>
  .dvdsmpsn.user-macro.aui-tabs .tabs-pane {
      border: 1px solid #ccc;
      padding: 10px;
  }
</style>

<script>
AJS.toInit(function (jQ) {
	jQself =  jQ('#aui-tabs-$uniqueId');
	jQself.prepend('<ul class="tabs-menu"></ul>');
	jQul = jQself.find('ul:first');

	jQself.find('.tabs-pane').each(function () {
		jQul.append('<li class="menu-item"><a href="#' + jQ(this).attr('id') + '">' + jQ(this).data('name') + '</a></li>');
	});

	jQself.find('li.menu-item:first').addClass('active-tab');
	jQself.find('.tabs-pane:first').addClass('active-pane');

	jQself.find('.menu-item').on('click', function () {
		jQ(this).addClass('active-tab').siblings().removeClass('active-tab');
		jQ(jQ(this).find('a:first').attr('href')).addClass('active-pane').siblings().removeClass('active-pane');
	});

	AJS.tabs.setup();
 });
</script>


-----

## Macro name: aui-tab
## Macro title: AUI Tab
## Macro has a body: Y 
## Body processing: Rendered
##
## Developed by: David Simpson <[email protected]>
## Date created: 2016-10-19
## Installed by: Your Name
##
## @param Name:title=Name|type=string|required=true|desc=The tab name

#set( $id = $action.dateFormatter.calendar.timeInMillis )

<div class="tabs-pane" id="aui-tab-$id" data-name="$paramName">$body</div>



-----

Hi David,

I tried to implement your macro in Confluence. I experience a weird behaviour that centers the viewport on the upper edge of the tab content when tabs a switched. I am very fresh in those areas of Confluence, maybe you have an idea for me how to address that?

Thank you in advance!