Create/improve expandable content boxes

[inventarSarah]

Problem Statement

The challenge:
How can we provide information that is only essential for some users/some use cases without cluttering pages?

For example, a user with a React-Laravel app wants to use Sentry Tracing. Since they use Laravel routes, they can't follow the suggested setup instructions in the quick start guide because they are for React routing.
But they may not be aware of this. So, how can we inform them about this in a way that is not too disturbing to other users?

Solution Brainstorm

Initial thoughts

One solution would be to add a subsection where users can find the needed info.
However, this adds content to the page that is not relevant for most users (it adds noise).
-> this added length can make the page seem more daunting

The simplest solution would be to set a link to a page with further information.
However, sometimes, it makes sense to provide the required information on the same page to keep the user on the page (as in the example above). It may also be that the user does not click on the link because they want to continue reading/following the guide they are currently on. As a result, they miss the information.

A more elegant solution

A more elegant solution could be to create an expandable content box component. By default, the component hides its content and only reveals it on demand -> kind of what we have in the troubleshooting pages.

So, doing it like this would probably work since we already have the components for this functionality.

However, I wonder if we could improve this even further. I could imagine that a single box, like in the screenshot above, placed in the middle of some content, is easy to miss. So, it might help to highlight these components a little more visually.

Design ideas

Inspiration

For example, I like how the React documentation has these "Deep Dive" boxes to add additional information:

I like that it has a background color and a button to toggle the content. It stands out without distracting from the other content.
You can see it in action here

Idea

I've created another issue to improve the callouts in our docs #12053
It could make sense to make these expandable boxes look similar to a callout but with a button to toggle the content.

Because the callouts and these expandable content boxes have a common important purpose: to provide additional information.
It may even make sense to use the same types and colors as the callouts (note, tip, important, caution).

This is what I've cobbled together while experimenting (though I'm sure it can be done prettier):

If we only want one type, we could further simplify the design. Here's what I mean (just again, properly designed ;D):

I'd love to hear some thoughts and ideas on this!