I’m using Finsweet’s Accessible Accordion (JS) with a rich text element as the content. It works all fine, except that in Editor mode all Accordions are collapsed and don’t respond on click interactions (as no JS is loaded in Editor). So currently I don’t see a way how to make the accordions’ contents editable for Editors.
It’s no option to connect it to a CMS collection as this would explode the project’s complexity.
Anyone knows how to deal with this?
I’ve not done it with this component but with my own components I use a block of custom CSS.
The HTML elements has a w-editor class on it as well as a data-wf-mode=editor attribute.
You can use those in a CSS block to modify your accordion, displaying and expanding those panes, probably something like display: block and height: auto.
The HTML elements has a
w-editorclass on it as well as adata-wf-mode=editorattribute.
Thank you for the hints. The thing with the w-editor class is that it still remains in the HTML tag after “going back to live-site”, doing a refresh or even opening the domain in a new tab. Seems it stays as long you’re logged in. So it’s a bit inconvenient to explain clients they would have to log out first.
I can’t find the attribute data-wf-mode=editor in my source code. Could it be that its use is outdated?
Indeed it does. This won’t affect your users but of course it does affect your editors. You can work around this by having then review their changes in an incognito window or a separate browser profile.
In SA5’s nested lists library, I actually use a gnarly editor-mode hack that identifies editor mode using the page title prefix of Editor:. It’s the only way I’ve found it to work consistently. Annoying.