Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Content Layer
namePage Info
id278129461
classwatermark-layer
Content Column
namePage Body
width100.00001%
id278129463
Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

Implementing a lightweight page-design option for 'hiding' text behind a click-to-open teaser.

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex

This standard built-in Confluence macro is offers an easy -to-implement option way to hide information ( with a "click to expand" text snippet ) until it's needed by the user.

Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered manual-steps-flex tight-bottom

Insert the Expand Macro

Adapt the title (teaser text) to your needs

Add content inside the macro

[[screenshot of macro + result please]]
HTML Wrap
classdocs-screenshot

Image Added

Content Block
margin10px 40px
background-repeatno-repeat
nameExample
border-width1px
border-color$lightGrayColor
id1889514394
background-imageDOCS_example.png
background-positioncenter
border-stylesolid
height60px
Expand
titleTeaser text...

Your hidden content goes here.

Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex
collapsiblecollapse
Note

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flexcollapsiblecollapse
Tip

Shortcut Key

In the edit window, hit the left curly bracket to add a macro on the fly.

Image Added

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
    nameWarning
    rich-link-hoverstrue
    id894530759
    classmanual-warning-flex
    collapsiblecollapse
    Warning

    If using:

    1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
    2. 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
    nameInfo
    rich-link-hoverstrue
    id894537203
    classmanual-info-flex
    collapsiblecollapse
    Info

    If using:

    1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
    2. 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
    nameRelated
    id888168050
    Content Column
    nameRelated
    width100%
    id888168051
    Content Block
    rich-links-hide-descriptiontrue
    rich-link-hoverstrue
    rich-links-columns4
    rich-links-verticaltrue
    rich-links-image-height100px
    rich-links-hide-site-icontrue
    rich-links-details-padding10px
    nameRelated
    rich-links-enabletrue
    border-width0
    rich-links-details-alignmentleft
    rich-links-margin20px 30px 0 0
    id496234544
    classrelated-block clean manual-related-flex