Conditional content toggle

[mgriff88]

I haven't been able to find any mention of adding conditional content in Mkdocs or Material so far. Is this possible?

We have some readers who are in a special group, and certain content only applies to them. I'd like to be able to add a toggle button to the header that lets them turn Special Content "On". Then, as they browse, certain additional content would appear throughout the pages. If that content isn't relevant, they can just switch the button to "Off."

Our docs site is unauthenticated, so it would need to be a manual toggle like this.

Is adding conditional text in this way supported by Material?

Thanks for your advice!

[alexvoss]

It is possible to have conditional content at the page generation stage with something like a hook or using the macros plugin. You can then just add a link as a way to switch between the different versions. Has the advantage of not requiring JavaScript.

If that is not a good option for your then you might need a customization that achieves the desired effect with some JavaScript. You might get an idea of how to implement this by looking at the implementation of the color palette toggle.

Depends on the specifics of your use case which of these would be preferable.

I had a look at the discussions to see if this has come up before but did not have any joy with the keywords I chose. Have a look, perhaps you have more luck. I am sure that using the color palette toggle for something else has come up before?!

[mgriff88]

Thanks for your reply and suggestions, Alex. I quite like the idea to look into the color palette toggle. That kind of instantaneous change is exactly what I had in mind.

I certainly thought I would've found something else on this subject in the discussion boards but was also coming up blank, before I posted my question! It seems like it would be a pretty common use case, catering to different personas.

[kamilkrzyskow]

So if authentication and confidentiality of the information isn't an issue, then the JavaScript would be cleaner I guess.

1. First wrap the special content in a <div class="mySpecialContent"> ... </div> in your .md files.
2. Then assign the class a display: none value in CSS to make it hidden by default (should match the default toggle setting).
3. Then the script would use document.querySelectorAll(".mySpecialContent") to find all of the elements, and depending on the state of the toggle add another class specialVisible that changes the display property or doesn't change anything, but additionally remove the mySpecialContent class to turn off the display: none.

The toggle button can also be added in JavaScript or directly in HTML in the header.html template.