Testing out the HTML for using details/summary tags for toggle opening content. Compare this in ordinary WordPress to the same done in Pressbooks.
What Are Accordions For?(show/hide)
The H5P documentation spells it out nicely:Reduce the amount of text presented to readers by using this responsive accordion. Readers decide which headlines to take a closer look at by expanding the title. Excellent for providing an overview with optional in-depth explanations.You can see that this might be effective to reduce long lists of information, references, or breaking content into sections more like a miniature outline. In this case, it’s used just a silly demo.
Foot Stomping Music(show/hide)
Well, that was silly. It would be useful maybe if one could include images here, but alas not in H5P. But we can!
Something Extra Sneaky!(show/hide)
Were you expecting that? Have we reached some form of H5P Inception?
As not all browsers will indicate the left side triangles to indicate an item to open, we add prompt text “show/hide” inside the <summary> with <em> tag. With some custom CSS (in WordPress, go to Customize -> Custom CSS and enter the styles below. We can make the interaction more clear with background color, a cursor on hovering, and moving the prompt text to the right side.
details {
background: #eee;
margin-bottom: 2rem;
padding: .5rem 1rem;
}
summary {
cursor: pointer;
}
summary > * {
display: inline;
}
summary em {
font-size: 80%;
float: right;
}
Featured Image:
