How to add disclosure widget to show and hide details
Add a disclosure widget using <details> HTML element to toggle on/off hidden content.
What is a disclosure widget
Sometimes, you want to add information to the chart description or footer, but don't want to clutter a chart with too much text - this is when a disclosure widget comes in handy - it allows your readers to toggle on to reveal (or disclose) hidden content.
How to add a disclosure widget
This is possible with a combination of <details> and <summary> HTML elements (see MDN Web Docs). Simply wrap content you want to hide inside <details> tag and use <summary> tag to add a label to your disclose widget:
Where can you add a disclosure widget
These HTML tags can be used in the Description and Notes section of the chart under the Annotate tab
as well as in the tooltips in scatter plots and maps.
When you're adding a disclosure widget in tooltips, make sure to have "Clicking makes tooltip stick" selected.
Here's an example. Hover over and click on 'Edit this chart' to copy to your account:
Notes & Tips: When you include a disclosure widget in the Notes section, you might see that the content doesn't get fully displayed in Step 4: Publish step. Don't worry, they will be displayed fully in your published chart.
Another tip: Avoid clicking on the toggle inside the chart in Step 3: Visualize since doing that will remove the tags from the text. To test out the disclosure widget, go to Step 4: Publish.
That's it! If you have any questions, feel free to reach out to support@datawrapper.de.