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

[kemsguy7]

@svrnm , here are my suggestions for improvement

1Preview with Gradient Fade:

• Show the first 3-4 lines of content by default
• Add a gradient fade-out effect at the bottom of the preview
• Use a prominent "Show More" button below the fade
• This gives users a glimpse of the content while indicating there's more

2. Visual Indicators:

• Add an icon (like a chevron or expand arrow) that rotates on expansion
• Use a distinctive background color or border to make the collapsible section stand out
• Include a label showing content type (e.g., "Console Output", "Code Sample")
• Add content length indicator (e.g., "120 lines")

3.Interactive Elements:

• Add a copy button that's always visible, even when collapsed
• Include syntax highlighting in the preview
• Smooth expand/collapse animation
• Optional: Add a mini-map preview on hover

4.Accessibility Improvements:
Clear focus states
Keyboard navigation support with javascript
Screen reader friendly labels
Proper ARIA attributes

Kindly let me know if I can proceed with my Implementation, thanks

[svrnm]

@kemsguy7 this sounds good to me. Please start with focusing on 1 Preview with Gradient Fade in a pull request, if we get this working, we can address the other few additional improvements.

[kemsguy7]

@kemsguy7 this sounds good to me. Please start with focusing on 1 Preview with Gradient Fade in a pull request, if we get this working, we can address the other few additional improvements.

Alright mentor, will will send a PR soon

[chalin]

@svrnm As I mentioned in #5463, I'd prefer a simpler solution. We can probably, for now, make due with CSS styling over <details> elements. For example, I've styled the first of the two elements shown in this screenshot (of course, this is a POC, color and border can be tweaked):

/cc @jack-berg

[svrnm]

@chalin let's talk about this at the next SIG meeting (Monday next week)