itch.io

Edit: simplified the CSS, and made it less of a headache to work with and easier to tweak :)

/* Styling for the toggles container */
.custom-toggles {
  display: inline-flex;
  background: var(--itchio_bg_color);
  border-radius: 24px;
}


/* Styling for the individual toggle */
.custom-toggle {
  padding: .1em .8em;
  margin: 2px;
  color: var(--itchio_bg2_color);
  border-radius: inherit;
  text-decoration: none;
  transition: .3s;
}


/* Initial state of the content (hidden) */
[class^="custom-content-"] {
  display: none;
}


#wrapper:not(:has(a.custom-toggle:target))

/* Default visible content ( .custom-content-a ) */
.custom-content-a,
/* Make sure to match the rule below */

  #wrapper:has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, #wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, #wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
  /* Add as much as you want. Just change the toggle-* and the .custom-content-* accordingly */
{
  display: block;
}


.custom-toggles:not(:has(a.custom-toggle:target))

/* Default clicked button ( toggle-a ) */
a.custom-toggle[name="toggle-a"],
/* Make sure to match the rule above */

/* Styling for the individual toggle when clicked/activated */
.custom-toggles > a.custom-toggle:target
{
  color: var(--itchio_button_fg_color);
  background: var(--itchio_button_color);
}

You can now add as many items as you want easily:

  #wrapper:has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, #wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, #wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
, #wrapper:has(a.custom-toggle:target[name="toggle-d"]) .custom-content-d
, #wrapper:has(a.custom-toggle:target[name="toggle-e"]) .custom-content-e
{
  ...
}

You can also change which toggle are active by default.