Accordion Box for Confluence v1.0.3

About Accordion Box

The Accordion Box displays collapsible content.

From the visual perspective, Accordion Box allows to present information in a limited amount of space. Furthermore, From user's experience perspective it increases the user's engagement since it allows the reader to collapse irrelevant information and to focus only on what's important to him.

The Accordion Box macro is a container of Accordion Item macro. In other words, Accordion Box body should only contains one or more Accordion Item macro which generates the collapsible content.

The Accordion Item has a clickable title and content. When the user clicks on the title, the content will be shown or hidden.

Accordion Box macro

The Accordion Box macro is a container of Accordion Item macro.

Body

The macro body should only contains one or more Accordion Item macro which generates the collapsible content.

Parameters

NameDescription
Style The style of the accordion box. One of the following values:
Classic
Classic Horizontal
Expand The behaviour of the accordion box. One of the following modes:
Expand Many

In this mode, the user can expand and collapse any accordion item by clicking its title.

If the width/height of the content is larger than the width/height of the accordion box - scrollbars will be displayed.

Expand One

In this mode, the accordion box will always expand one and only one accordion item - which called the active accordion item.

The user can not collapse the active accordion item, but it can change it by expanding other accordion item by clicking its title.

The initial active accordion item will be the first accordion item with the state shown if exists, otherwise the first accordion item.

If the width/height of the content is larger than the width/height of the accordion box - scrollbars will be displayed.

Expand One and Fill

In this mode, the behaviour is the same as Expand One except that all the collapsed items will be displayed without displaying scrollbars.

In other words, The active item will be resized to fill the remaining space - scrollbar for the body content will if the space is smaller than the content.

Width

The width of accordion box. The following formats are supported:

Format Description
400px The size will be 400 pixels
60% The size will be 60% of available space
40%;200px;500px The size will be 40% of available space. However, it will be at least 200 pixels and at most 500 pixels
Height The height of accordion box. The format is the same as width

Using the Accordion Box macro

  1. Click Edit at the top of this page. Now you're in the editor.
  2. Open the macro browser :
    • Click on 'Insert more content' toolbar icon. In the opened menu click 'Other macro':
    • Or press Ctrl+Shift+A
  3. In the macro browser, select formatting category.
  4. Select the Accordion Box macro. The following should appear :
  5. Click insert. The macro placeholder will appear
  6. Now , add one or more Accordion Item macros

Accordion Item macro

The Accordion Item has a clickable title and content. When the user clicks on the title will be shown or hidden :

  • If the content is hidden, the content will be shown
  • If the content is shown, the content will be hidden

Body

The macro body is the collapsible content - It can be text, images, macros ...

Parameters

NameDescription
Title The clickable title of the collapsible content.
The behaviour of the click action is:
  • If the content is hidden, the content will be shown
  • If the content is shown, the content will be hidden
Initial State Whether the collapsible content will be shown when the page is loaded. The value can be 'Shown' or 'Hidden'

Using the Accordion Item macro

  • Move the cursor in Accordion Box macro body to the desired location
  • Open the macro browser :
    • Click on 'Insert more content' toolbar icon. In the opened menu click 'Other macro':
    • Or press Ctrl+Shift+A
  • In the macro browser, select formatting category.
  • Select the Accordion Item macro. The following should appear :

    Fill the parameters:
    • Title is the clickable title of the collapsible content.
    • Initial State controls whether the content should be shown at page load
  • Fill the macro body with the collapsible content. You can use text, images, macros and more
  • Add many Accordion Item as desired