The {card} macro, when used with the {deck} macro, creates a tabbed panel which is ideal for separating out blocks of related content.
The {card} macro defines the content of each card within a deck and provides card specific settings such as:
The text (or other wiki content, such as images) to display on the tab associated with the content
The keyboard shortcut (access key) used to display the card
This tutorial is primarily concerned with the {card} macro, there is a related tutorial on the deck macro which may also be of use.
The {card} macro parameters define the label that is displayed on the tab within a deck of cards, as well as the CSS class to be used when rendering the card whether the should be the default one displayed or not.
Whether the card should be the default one displayed or not
accessKey
The keyboard shortcut for the tab. Usually 1-9.
This plug-in is available without cost for both commercial and non-commercial purposes. However, if you have found it to be useful, particularly within a commercial environment, please consider making a donation to the author. This will encourage continued development of this and other plug-ins, as well as speeding up the response for your latest maintenance request.
If you wish to donate, it can be done easily with a credit card or bank transfer using Paymate. No account sign-up is required for credit card payments.
This macro is compatible with Confluence 1.3.x, 1.4.x and 2.x. It has been tested by Adaptavist with Confluence 1.4.1, 1.4.3 and 1.4.4. It has been tested by David Peterson with Confluence 2.0.
This macro is usually pre-installed with Builder accounts. If you wish to install it on your own Confluence install, please download it from the RandomBits Website.
Adaptavist maintain a JIRA Project for tracking bug reports and feature requests for this macro. The currently reported items are shown below:
jiraissues: Could not download[ http://jira.adaptavist.com/secure/IssueNavigator.jspa?view=rss&pid=10036&component=10101&statusIds=1&statusIds=3&statusIds=4&statusIds=5&sorter/field=updated&sorter/order=DESC&tempMax=25&reset=true&decorator=none] : caused by : Circular redirect to 'http://jira.adaptavist.com:80/secure/IssueNavigator.jspa'
In order to create a simple tabbed deck, simply add one or more cards as shown below (each card must have a label):
{deck:id=myDeck}
{card:label=tab1}
This is the first tab's content
{card}
{card:label=tab2}
This is the second tab's content
{card}
{deck}
Which produces the following output:
This is the first tab's content
This is the second tab's content
Setting the default tab
There may be times when you want a tab other than the first one to be the default one to be displayed, you can do this by setting the default parameter
{deck:id=myDeck1}
{card:label=tab1}
This is the first tab's content
{card}
{card:label=tab2|default=true}
This is the second tab's content
{card}
{deck}
Which looks like this:
This is the first tab's content
This is the second tab's content
Hints and Tips
Only use these macros where they are really needed as they can sometimes make a web page look a little cluttered.
When using these macros, remember that printouts will only include whichever card (ie. tab) is selected within each deck on a page.
Try not to nest decks of cards within each other (as seen in our examples). While it can be tempting to have a deck of sections with each section containing a deck of topics and each topic containing a deck of sub-topics, it can be very confusing for the end user if they are presented with such a structure - it's easy to loose track of where you are in relation to the other content. Instead, you should consider using the cloak macro for the inner content.
Frequently Asked Questions
Q
I've set a default tab, but it's not shown by default?
A
The default tab will only be shown when you first visit a page. When you select any tab, it's "remembered" (using cookies) for subsequent visits. By default, the cookie that remembers which tabs were selected will expire after 7 days - for more information, please see the composition-setup macro.
Ditto to the same question. I would like to be able to create a link from a source page that takes the user to a specific tab on the destination page. Is that possible? If so, how is this done?
Thanks in advance ...
When I try to use the deck and card concept in a nested fashion (similar to what is done in the example). The lower level tabs disappear when I move my mouse over the top level tabs. The only difference between my application and the example is that I put the lower layer tabs in a panel within a column. Any idea how to workaround this issue.
You can nest decks in the below fashion. I discovered it by accident, however have used it MANY times and have never experienced any issues. The trick is when closing the card or deck, you need to specify which. For example to close a card named tab15, you need to give the command card:tab15, surrounded by squiggly brackets of course. See below for a larger example. Hope this helps!
{deck:id=mydeck}
{card:label=tab1}
tab1 content goes here
{card:tab1}
{card:label=tab2}
tab2 content goes here
{deck:id=nesteddeck}
{card:label=tab2sub1}
tab2 subtab 1 content goes here
{card:tab2sub1}
{card:label=tab2sub2}
tab2 subtab 2 content goes here
{card:tab2sub2}
{deck:nesteddeck}
{card:tab2}
{card:label=tab3}
tab3 content goes here
{card:tab3}
{deck:mydeck}
Added by
any idea how this works out in combination with the anchor macro? For example I want to link into the 3rd tab of the cards from another page? Thanks
Was this answered of line? We would also like to be able to anchor to different cards?
Ditto to the same question. I would like to be able to create a link from a source page that takes the user to a specific tab on the destination page. Is that possible? If so, how is this done?
Thanks in advance ...
Hello,
I'm interested as well by the same feature.
I have a page with 3 tabs. In another page, I want show a link tothe second tab of my first page.
How can I do it? The tabs are not named.
Thanks,
Bruno
I'm in the same boat, and would like to know how, if it is even possible. If not, wow it would be a GREAT addition!
When I try to use the deck and card concept in a nested fashion (similar to what is done in the example). The lower level tabs disappear when I move my mouse over the top level tabs. The only difference between my application and the example is that I put the lower layer tabs in a panel within a column. Any idea how to workaround this issue.
You can nest decks in the below fashion. I discovered it by accident, however have used it MANY times and have never experienced any issues. The trick is when closing the card or deck, you need to specify which. For example to close a card named tab15, you need to give the command card:tab15, surrounded by squiggly brackets of course. See below for a larger example. Hope this helps!
{deck:id=mydeck} {card:label=tab1} tab1 content goes here {card:tab1} {card:label=tab2} tab2 content goes here {deck:id=nesteddeck} {card:label=tab2sub1} tab2 subtab 1 content goes here {card:tab2sub1} {card:label=tab2sub2} tab2 subtab 2 content goes here {card:tab2sub2} {deck:nesteddeck} {card:tab2} {card:label=tab3} tab3 content goes here {card:tab3} {deck:mydeck}