8 Toggle This
The H5P Accordion content type is well used for reducing the amount of content displayed by using folding “drawers” that open or close. They also are useful for creating thought questions with the answers or followup information hidden.
This is fine. But a limit for the H5P content type is that it is not going to be available for PDF and ePub versions of your textbooks, instead a link is published to return to the web site.
As pointed out to use by Steel Wagstaff, we do have another option that works because it is web standard HTML, and thus should work in these formats.
Have you considered the good old <details> HTML element? https://t.co/bDz6r8vhdn No JS needed, is fairly accessible (see https://t.co/BEtRLSIyEW), and works well in exports. What’s not to like? 😉
— Steel Wagstaff (@steelwagstaff) March 11, 2021
This is using the HTML tags for Summary/Details.
Let’s experiment.
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 Pressbooks, go to Appearance -> Custom Styles and enter into the space for “Web Styles”. 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;
}
