Show/hide text

We sometimes get asked if there’s any way to show/hide or expand/contract text in WordPress.com posts and pages. The answer at the moment is, not a great one, but it is possible with two methods.

The first method is available to all  WordPress.com users, but is not supported in all browsers. The second method is only available on WordPress.com sites that can edit CSS (at the time of writing, those with the Premium or Business plan).

Method 1

There is a sweet HTML element called Details, which does exactly this. The HTML looks like:

<details>
<summary>Some details</summary>

  More info about the details.
</details>

And here is what it looks like in practice:

You should be able to click on Some details and see More info. If you can already see More info then your browser doesn’t support this HTML element. You can check which browsers currently support this in the Mozilla document on Details.

To use this HTML you need to use the HTML editor for your post or page. Please see the support document about using HTML.

Method 2

This requires both HTML in your post, and CSS in the Customizer.

You can use almost any HTML & CSS combo, but I think a good format would be something like the following. For consistency I’m going to use class names similar to the details HTML.

<div class="details">
  <a class="summary" href="#info1">Some details</a>
<div id="info1" class="info">More info about the details.</div>
</div>

It’s important that for each of these you create info1 matches in the href and id attributes, and you should change it to info2 and info3 etc for each new one you add in the same post or page.

Then in the Customizer you can paste this CSS:

.details .summary:before {
  content: "➤ ";
}

.info {
  display: none;
}

.details .info:target {
  display: block;
}

Here is the code in action: