Use disclosure widget to show/hide more details in challenges

[lasjorg]

Describe the Issue

I can't remember if we have talked about this before.

With the current editor layout explaining a concept and giving example code can get awkward. Because the instructions are inside the code it can push the code too far away from the instructions.

It would be nice to have the option to disclose more details and example code in the challenge text.

Base explanation

<details>
  <summary>More details:</summary>
  More detailed explanation and code example
</details>

Requirements

Affected Page

https://www.freecodecamp.org/learn

Your code

Expected behavior

Less shallow explanations because of limitations in the layout and allowing the camper to disclose more details as needed.

Screenshots

No response

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[ShaunSHamilton]

I think this should just require a CSS fix so the summary does not appear like this:

Clicking on it still works, but does cover the code (not sure if this is better or worse):

[Sembauke]

Why not make the upper-jaw scrollable? Make it have a fixed height and a shown scrollbar, when needed.

[lasjorg]

That doesn't hide the content.

The idea is to have more information if the camper needs it, without having it take up space before they need it. Or just quickly toggle it visible/hidden as needed.

[gova646]

Could you please provide a more detailed explanation of the issue. Also can you please provide the links to the respeccive pages where the changes are required.In the link https://www.freecodecamp.org/learn/ I donot see summary in it.

[a2937]

Okay so near as I can tell, we want the code examples collapsible. Which seems to be coming from right around here right? https://github.com/freeCodeCamp7/freeCodeCamp/blob/1cab4b5797a50618ab51dc91441167e983e3f715/client/src/templates/Challenges/components/prism-formatted.tsx

But here might be better too, as it sets up the examples. https://github.com/freeCodeCamp/freeCodeCamp/blob/1cab4b5797a50618ab51dc91441167e983e3f715/client/src/templates/Challenges/utils/index.ts

[moT01]

Related: #52954