Page Toggle

This shows how to create a "page toggle". It only works for 2 states. So this is best used to change the font of your page, or to hide/unhide spooky content in accordance with a content warning.

---

⚠️ Content Warnings ⤴

Info

Content warning: NATASHAPOSTING

Close

Hide images

This version of the page would have no images.

See how there's no images?

---

Show images

This version of the page would have images.

OMG SCARY IMAGES!!

---

This is a regular tabview, made with this code:

[[tabview]]

[[tab Hide images]]

This version of the page would have no images.

See how there's no images?

----
[[/tab]]

[[tab Show images]]
This version of the page would have images.

[[image https://outspacer.wdfiles.com/local--files/first-entrances/Fuckitallup.png alt="A shittily drawn meme that says "watch as i fuck it all up with one click" with an anime girl at a 2000s computer"]]

OMG SCARY IMAGES!!

----
[[/tab]]

[[/tabview]]

The only difference is the addition of this CSS module:

/* Make it so that the tab content shows as just part of the main page */
:is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-content {
    display: contents;
}
 
/* Hide the selected tab */
:is(.yui-navset,
.yui-navset-top,
.yui-navset-bottom) .yui-nav .selected {
  display: none !important; /* !important for Super Liminal */
}
 
/* Make the list of tabs (which is one tab long) thin, small, and right-aligned */
 
.yui-navset .yui-nav {
    width: min-content;
    margin-right: 0;
    margin-left: auto; /* for non-BHL themes */
    font-size: 90%;
}

You'll have to do the CSS slightly differently on some themes.