cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Lamplighter II

Accordion Alternative - Details tag

Howdy! A friend showed me the details tag the other day and now I cannot stop telling others about it.

It's an HTML5 tag so it works in mobile too! See more at The Details disclosure element.

Spoiler
The spoiler reminds me of the details tag!

I added some styling to the main parts. Here is the code to try in your Canvas page:

<details>

 <summary style="background-color: whitesmoke; font-weight: bold; cursor: pointer;">
  Some question here? <small>(click to reveal)</small></summary>

 <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey;">
<p>Reveal text goes here</p>
</div>

</details>

I've already started using it on pages to split up large content blocks including video! I found the old places where the accordion was used and replaced each with its own details block.

Group of details to mimic an accordionGroup of details to mimic an accordion

 

Cheers - Shar

Labels (2)
12 Replies
Highlighted

@jdick1 

Oh it's a new HTML5 tag, as in 2020 new. 😁 Part of the HTML5 Semantic Elements group of new tags.

Cheers - Shar

0 Kudos
Highlighted
Learner II

Where has this been all my Canvas life!? Thank you so much for sharing this, Shar!

0 Kudos