Feature request - details/summary ClassName tag enhancement

[andrewrowatt-masseyuni]

Hi Michael & team,

We are starting to promote the use of {details}{summary}{/summary}{/details}. But, some users have asked for some visual (CSS) presets e.g., the summary content should look like a heading or can the widget be presented in "accordion" style when they are stacked.

I was thinking that a potential implementation is for the {details} tag to allow for an optional parameter e.g., {details style1} or {details style2} which would generate the HTML . My theme stylesheet would contain the relevant CSS i.e., this would not be part of the FilterCode code.

I am happy to get this developed as long as you don't think it goes against your plans.

A couple of samples are below.

I would also note that I will not be overriding default (browser) styling of details/summary.

Thanks, Andrew

/ Sample https://github.com/michael-milette/moodle-filter_filtercodes/issues/1 - Simple / details.style1 {} details.style1 > summary {font-weight:bold;}

/ Sample https://github.com/michael-milette/moodle-filter_filtercodes/issues/2 "Accordian", useful for when a number of details/summary blocks are stacked e.g., for a simple FAQ set / details.style2 { border: 1px solid #eee; padding: .5em .5em 0; background-color:#eee;

}

details.style2[open] { padding: .5em; }

details.style2[open] > summary + p + p { padding-top: .5em; }

details.style2 > summary { margin: -.5em -.5em 0; padding: .5em; font-weight:bold; background-color:#ddd; }

[michael-milette]

Hi @andrewrowatt-masseyuni

If I understand you correctly, the syntax would look like this:

{details style2}{summary}Section Title{/summary}This is more details relating to the title of this collapsible seciton{/details}

This sounds like a good idea. Thank you for offering to contribute. If you create multiple commits, please be sure to squash them into a single commit before submitting your PR.

Will you be participating in Hacktoberfest 2022? If so, I would be happy to flag your PR as a qualifying contribution towards meeting your Hactoberfest challenge requirement but you will have to register for Hacktoberfest and submit your PR in October 2022. Learn more about this by visiting https://hacktoberfest.com/

Looking forward to working with you to integrate this new feature.

Best regards,

Michael

[michael-milette]

Hacktoberfest has officially started and will run to the end of October. Hope you see your PR!

[michael-milette]

Hi @andrewrowatt-masseyuni , thanks again for your contribution. Much appreciated.

Best regards,

Michael