29 Show/Hide Boxes with Pure HTML [Details Element]

One way to implement local show/hide features without using plugins or fancy javascript is to use a native HTML5 element called <details>. There isn’t currently a WYSYWIG button for it, so do use it, you’ll have to be comfortable working with raw HTML in Pressbooks’ text editor, but the <details> element offers a simple, powerful way to make expanding text boxes (also known as disclosure widgets) in your Pressbooks web book.

Here’s one example:

Show More

Here’s some text (and an image) which starts as hidden, but can be shown if the user clicks on the show more text above.

You can put anything that fits inside a standard Pressbooks webbook inside of the details element, including H5P activities, as seen below:

One important thing to note is that the <summary> description of the details element is fixed, meaning that it does not dynamically change based on state changes. No matter whether the details element is open or closed, the text remains the same. This just means that you should choose carefully what the text says. In this case, we wrote ‘Show More’ — this is fine when text is collapsed, but it is no longer true when the text is expanded. A more accurate label might be ‘Collapse or Expand Text’ or even ‘Show/Hide’.

How to make a show/hide collapsible box

The details element is very simple and starts and ends with the standard HTML tags: <details> and </details>. If the first child element is a <summary>, whatever appears within the summary will be used as the label for the show/hide box. Here’s some sample code for a very minimal show/hide disclosure widget:

<details>

    <summary>Show/Hide</summary>

    This text is hidden at first, but can be expanded by the user.

</details>

The code above would produce a disclosure widget that looks like this:

You can use this code by copying and pasting it into the text editor of your own Pressbooks chapter. To change the label, simple edit the text between the two <summary> tags. To change the hidden text, edit the text that follows.