Implementing a lightweight page-design option for 'hiding' text behind a click-to-open teaser.
Content Block
name
Outcome
rich-link-hovers
true
id
1042866408
class
tight manual-outcome-flex
This standard built-in Confluence macro is an easy-to-implement option to hide information (with a "click to expand" text snippet) until it's needed by the user.
Content Block
name
Steps
rich-link-hovers
true
id
494842117
class
steps-block numbered manual-steps-flex
Insert the Expand Macro
Adapt the title (teaser text) to your needs
Add content inside the macro
[[screenshot of macro + result please]]
Content Block
name
Note
rich-link-hovers
true
id
495965127
class
manual-note-flex
collapsible
collapse
Note
If using:
Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
Content Block
name
Tip
rich-link-hovers
true
id
894522670
class
manual-tip-flex
Tip
title
Keyboard Shortcut
Hit the left curly brace for a quick shortcut to add a macro in the editor
If using:
Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks
.
Content Block
name
Warning
rich-link-hovers
true
id
894530759
class
manual-warning-flex
collapsible
collapse
Warning
If using:
Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Block
name
Info
rich-link-hovers
true
id
894537203
class
manual-info-flex
collapsible
collapse
Info
If using:
Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Layer
background-color
$lightGrayColor
name
Related
id
888168050
Content Column
name
Related
width
100%
id
888168051
Content Block
rich-links-hide-description
true
rich-link-hovers
true
rich-links-columns
4
rich-links-vertical
true
rich-links-image-height
100px
rich-links-hide-site-icon
true
rich-links-details-padding
10px
name
Related
rich-links-enable
true
border-width
0
rich-links-details-alignment
left
rich-links-margin
20px 30px 0 0
id
496234544
class
related-block clean manual-related-flex
Replace me with a link
Replace me with a link
Aim for 4 or fewer related links. If we need more, that's okay. Be judicious. Delete me when you're done.