Experimental accordion-style sliding for TryExamples iframe panels, as a means to avoid content layout shift

[agriyakhetarpal]

Important

This is an experimental PR to gather feedback at this time. It is ready for review, but is not yet intended to be merged.

This PR introduces a refactor of the interactive example panel for accessibility reasons, i.e., to avoid content layout shifts that arise when a TryExamples directive button is clicked to replace the examples code snippet section with the JupyterLite iframe. With these changes, I would like to showcase an alternative approach. Instead of hiding/replacing the examples section, we keep it and expand the JupyterLite iframe, which slides down when the "Try it!" button is clicked. This means that while there is some duplication of examples, our accessibility improves overall, and we also have a nice iframe that slides down and slides back up. When the iframe is open, the "Try it!" button logically changes to a "Hide" button. IMO, the user's context is preserved: they can see the original example code snippets while interacting with the notebook, and they don't lose their place on the page because the page's elements don't jump around.

There are a couple of associated accessibility-related changes here, such as disabling animations when reduced motion is preferred and adding more ARIA attributes to indicate the iframe's expansion/contraction. I got them from reading this blog post: https://dev.to/grahamthedev/accessible-animated-accordion-in-pure-css-no-way-5980. We can bring the latter in its own separate PR if we decide not to go ahead with this approach.