Last updated:
After practising basic tags on Playcode123.com, you can make a useful help panel without writing JavaScript. This project puts two troubleshooting answers behind clear questions and highlights the file extension that a beginner needs to check.
What this project adds
You will build two independently expandable questions. The answers explain two common local-file problems, so the panel has a practical purpose on a small learning website. The questions remain visible when the answers are closed.
Set up the page
Create a file named help.html, paste the complete example below, and open it in your browser. Everything is in this one file. Keep the opening instruction outside the expandable panels: saving your work is useful to every visitor, even someone who does not open a question.
Complete example to try locally
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help for a local webpage</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.6;margin:0;padding:24px;color:#172b3a;background:white}main{max-width:720px;margin:auto}a{color:#145da0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #145da0;outline-offset:3px}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}
details{border:1px solid #708392;padding:16px;margin:16px 0}summary{cursor:pointer;font-weight:600}mark{background:#fff1a8;color:#172b3a}
</style>
</head>
<body>
<main>
<h1>Help for my first webpage</h1>
<p>Save your work before refreshing the browser.</p>
<details>
<summary>Why can I see my HTML code instead of a webpage?</summary>
<p>Check that the file ends in <mark>.html</mark>, not .html.txt.</p>
</details>
<details>
<summary>Why has my latest change not appeared?</summary>
<p>Save the file in your editor, then refresh the matching browser tab.</p>
</details>
</main>
</body>
</html>Try it with a mouse and a keyboard
Click the first question. Its answer should appear immediately; click again to close it. Then use Tab to reach a question and press Space or Enter to toggle it. Check that you can see which question has keyboard focus.
Open both questions. In this example they remain open independently, which lets a reader compare the answers. We have not added code that closes one whenever another opens.
Why these elements work together
Each details groups one question with its answer. Its first child, summary, provides the visible question. Write a specific question rather than repeating “Read more” for every panel.
mark identifies text that is relevant in context: here, the extension to inspect. It is not a general replacement for strong, which expresses importance. Do not rely on highlight colour alone to communicate an instruction; the sentence still needs to make sense without it.
Troubleshoot the panel
- If a question starts expanded, inspect the opening details tag for the open attribute.
- Writing open=”false” still opens a panel. Remove the attribute completely to start closed.
- If you get an unhelpful default label, check that you included a summary inside the details element.
- Keep the closing details tag after its answer, before the next question.
- Do not put a link or button inside the question for this simple project: it introduces another action in the same interactive area.
Closed details are not private storage. The answer is still delivered to the browser, so never use this pattern to hide passwords or information that requires authorization.
Exercise: add a third question
Add a panel asking “Why is my picture missing?” Its answer should tell the reader to check the image path. Start that panel open so a visitor can immediately see an example answer.
Solution: copy one complete details block, replace its summary and answer, and change its opening tag to <details open>. You should now have three questions, with only the third open after reloading.
Make the questions easier to scan
Read only the three questions in order. Could a visitor choose the right answer without opening all of them? If not, improve the labels. Keep answers focused on the named problem and link to a longer guide when several troubleshooting steps are needed.
Use this pattern for optional help. Essential warnings, prices, and instructions should not disappear merely to make the page look shorter.
Continue your project
Using PNG Images in a Webpage is a useful next step. Return to the HTML examples on Playcode123.com whenever you want to review the basic syntax.
Further reference
Technical reference: MDN: details, MDN: mark.