FilterCodes filter for Moodle enables content creators to easily customize and personalize course and site content using plain text tags (no HTML). For premium support, contact us at https://www.tngconsulting.ca/contact
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.
/ Sample #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;
}
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 #1 - Simple / details.style1 {} details.style1 > summary {font-weight:bold;}
/ Sample #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; }