Expand-by-default for Expand Macro with Stylesheet

[Loo Bo Wen]

Hi friends! 

I'm looking for a solution to have all my Expand Macros in a site to be expanded as default. My customer mentioned that their users are missing out key information from not clicking on Expand Macros. 

The current space also has too much populated content for me to manually remove all Expand Macros. I had previously created an Expand / Collapse All User Macro that does this on 1 click, but users are still required to click on the User Macro button first. Customer wishes to get rid of the Expand / Collapse All User Macro and change expand to be defaulted. 

Understand that this will require some scripting, those anyone have any such solutions to share that I could perhaps put into the Space's Stylesheet? Is there such a solution to begin with? 

Thank you so much. 

[Matt · Accepted solution]

If this is on server/dc, you can add some JS to the Custom HTML section of Admin General Config.

Add this to the "At end of the BODY" section.

<script>
    AJS.toInit(function () {
        AJS.$('.expand-icon').click();
    });
</script>

[Loo Bo Wen]

Sorry for the late reply Matt and thank you! 
I think in the method you suggested, it would apply to all Expand macros in all my spaces since it's using Admin General Config; just to clarify? 

I tested your solution on a page using the HTML macro and it worked (Hurray!)

However, I did hope that it could be done on a Space level, I used your HTML on Settings > Space Stylesheet but it didn't work; only in using HTML macro within a page did. 

Do you happen to be also experience the same thing? :) 

[Matt]

The space stylesheet will only allow for CSS which is why the first solution won't work, that's making use of JS. 

This can be accomplished using the space's stylesheet with this code:

.expand-hidden { display:inline-block; opacity:1;} 

I'd like to warn that this is basically a hack and will change how the expand/collapse functionality works. In order to then have the section collapse a user will have to click it twice. This is because we're doing the expand with CSS so when a user clicks on the link to collapse the JS will first execute the expand command (which we've already done with the CSS) and then again to actually collapse the section. It's a hack but should accomplish what you want.