Provide a better visualization for collapsing long blocks of code/output

[svrnm]

We are currently using <details> and <summary> to wrap long code blocks or text outputs. An example can be seen here:

Code: https://github.com/open-telemetry/opentelemetry.io/blob/main/content/en/docs/languages/js/getting-started/nodejs.md?plain=1#L254
Output: https://opentelemetry.io/docs/languages/js/getting-started/nodejs/#run-the-instrumented-app

Screenshot:

This is really hard to see and easily overseen when someone scrolls through the page, especially when they are looking for the expected output or a code snippet.

It would be great to have a better visualization, e.g. the first few lines are shown but the rest is hidden away with an "unfold" button. There are plenty of options, but it would be good to have something that makes it visually clear that there is something behind that "tiny arrow"

Special Note for Outreachy Contributors: if you want to work on this issue, please make sure that you have completed the small steps and at least one assigned issue as outlined here: #5290

[kemsguy7]

@svrnm , can you please assign this to me?

[svrnm]

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

[kemsguy7]

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

Please can i work on this now?

[svrnm]

@svrnm , can you please assign this to me?

Let's finish #5403 first, then you can work on this one

Please can i work on this now?

Yes! I suggest you start by making some suggestions how you would implement that or what ideas you have to address the issue