Is there a collapse/expand feature in WYSIWYG editor?

Help / Discuss
1

Hi! I was wondering if I could have a collapsible/expandable section for pages. This is because I want some parts of my page to be optional to read.

Thanks in advance!

1 Like
2

I never used it myself, but you might want to take a look at the ShowHide Macro.

Have a good day!
Lucas Charpentier

3

@jbl, @CharpentierLucas: The Show / Hide macro unfortunately does not work well together with the Wysiwyg editor and especially inline editing mode.

In the best case, expanding / collapsing does not work any more after editing the page, and the macros contents also cannot be edited in Wysiwyg mode at all.

In worse cases, the Show/Hide macros content will randomly “duplicate” on the edited page, causing a mess.

Recently we added a new Expandable Macro which can be used in Wysiwyg mode. While editing all contents are expanded, after saving they can be collapsed / expanded as desired.

Multiple directly adjacent Expandable Macros can form an accordion component.

(Disclaimer: We’re this macro’s developer, so this is a shameless ad. :wink: The macro is GPLed of course and can be used for free.)

2 Likes
4

If using an extension is not an option: As a quick and easy solution in wiki syntax, I simply use and customize the class box xwikirenderingerror.

(% class="box xwikirenderingerror" style="cursor: pointer; background-color: LightSkyBlue; color: black; display: inline-block;" %)
(((
ℹ️  **Title** //(click to expand/hide…)//
)))

(% class="box xwikirenderingerrordescription hidden" style="background-color: Gainsboro; border: 1px dashed lightgray; border-radius: 5px;" %)
(((
This is your content…
)))

Looks like:

Expand
Expand1698Ă—296 13.8 KB

xwikirenderingerror is editable in WYSIWYG, but xwikirenderingerrordescription cannot be modified in WYSIWYG. If full WYSIWYG functionality is needed during editing, simply remove hidden, make the changes, and then set xwikirenderingerrordescription back to hidden. This works smoothly without saving by switching between WYSIWYG and WIKI:

Edit

I also wrapped the code in a custom macro with some style parameters, allowing the content to be edited directly in the macro dialog.