🗺️ The Folded Map

In the Islands of Innovation, you uncover a map unlike any other—its parchment unfolds only when you’re ready to see more. Each fold hides layers of knowledge, waiting to be revealed at the perfect moment.

This is no ordinary map:

📦 Organize complex ideas into bite-sized sections
🎁 Hide answers, examples, or extensions until needed
🔍 Focus attention by revealing one layer at a time

"Like any good treasure map, the magic lies in what’s not immediately visible."

Your Cartographic Mission

✂️ Task: Fold Knowledge with AI-Powered Accordions

Plot your course: Ask AI to structure content hierarchically (e.g., "Break down [topic] into 3 sub-sections with 2 key points each")
Fold the map: Convert the output into HTML accordions using the template below
Mark the treasure: Use icons (📖, 💡, etc.) to hint at hidden content
Share the compass: Teach others to create their own folded maps

💡

Pro Tip: Add a "Click to reveal" counter (e.g., 3/5 sections opened) to gamify exploration.

Accordion (Collapsible Content)

Use the <details> and <summary> tags to create collapsible sections.

Example 1

Click to Expand

This is the hidden content. It will be revealed when you click the summary above.

<details style="margin: 10px 0; font-family: Arial, sans-serif;">
<summary style="background-color: #003d4f; color: white; padding: 10px; cursor: pointer;">Click to Expand</summary>
<div style="padding: 10px; border: 1px solid #ddd; margin-top: 5px;">This is the hidden content. It will be revealed when you click the summary above.</div>
</details>

Example 2

About This Resource

<details style="border: 1px solid #d1d1d1; border-radius: 5px; background-color: #34495e; color: white; margin-bottom: 10px;">
<summary style="cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; padding: 15px; height: 40px; font-size: 18px; background-color: #5f6b7f; color: white;"><i class="icon-info"></i> <span>About This Resource</span></summary>
<div style="border-top: 1px solid #d1d1d1; margin-top: 10px; padding: 15px; background-color: #f9f9f9; color: black;">
<p>Place content here </p>
</div>
</details>

</> HTML code for the xxxxx above

Code below is for this box as a template

<details style="border: 1px solid #d1d1d1; border-radius: 5px; background-color: #34495e; color: white; margin-bottom: 10px;">
<summary style="cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; padding: 15px; height: 40px; font-size: 18px; background-color: #5f6b7f; color: white;"><i class="icon-info"></i> <span></> HTML code for the xxxxx above</span></summary>
<div style="border-top: 1px solid #d1d1d1; margin-top: 10px; padding: 15px; background-color: #f9f9f9; color: black;">
<p>HTML Code here</p>
</div>
</details>
<p> </p>

📖 Further Reading and Resources

<details style="border: 1px solid #d1d1d1; border-radius: 5px; background-color: #34495e; color: white; margin-bottom: 10px;">
<summary style="cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; padding: 15px; height: 40px; font-size: 18px; background-color: #5f6b7f; color: white;"><span>📖 Further Reading and Resources</span></summary>
<div style="border-top: 1px solid #d1d1d1; margin-top: 10px; padding: 15px; background-color: #f9f9f9; color: black;">
<p>Place content here</p>
</div>
</details>

Example 3

Title of Sub-section here

(click to reveal)

Content sub-title

content content content

Title of Sub-section here

(click to reveal)

Content sub-title

content content content

</> HTML code for the example above

<h4 class="mb-2 mt-6 text-lg first:mt-3"><strong>Title of Sub-section here</strong></h4>
<details>
<summary style="background-color: whitesmoke; cursor: pointer;"><small>(click to reveal)</small></summary>
<h4 class="mb-2 mt-6 text-lg first:mt-3">Content sub-title</h4>
<p>content content content </p>
</details>
<hr />

Example 3

📖 How to Use Thematic Analysis

(click to reveal)

Sub-heading here

Content content content

📖 Reflexivity in Thematic Analysis

(click to reveal)

Sub-heading here

Content content content

📚 Further Reading & Resources

(click to reveal)

Sub-heading here

Content content content

</> HTML code for the feature above

<h3>📖 How to Use Thematic Analysis</h3>
<details>
<summary style="background-color: whitesmoke; cursor: pointer;"><small>(click to reveal)</small></summary>
<p> </p>
<h4>Sub-heading here</h4>
<p>Content content content</p>
</details>
<hr />
<h3>📖 Reflexivity in Thematic Analysis</h3>
<details>
<summary style="background-color: whitesmoke; cursor: pointer;"><small>(click to reveal)</small></summary>
<h4>Sub-heading here</h4>
<p>Content content content</p>
<p> </p>
</details>
<hr />
<h3>📚 Further Reading & Resources</h3>
<details>
<summary style="background-color: whitesmoke; cursor: pointer;"><small>(click to reveal)</small></summary>
<h4>Sub-heading here</h4>
<p>Content content content</p>
</details>
<hr />

Accordion Title ONE (click to reveal)

Your content here.

Accordion Title TWO (click to reveal)

Your content here.

Accordion Title THREE (click to reveal)

Your content here.

</> HTML code for the feature above

<details>
<summary style="cursor: pointer;">Accordion Title ONE<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>
<details>
<summary style="cursor: pointer;">Accordion Title TWO<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>
<details>
<summary style="cursor: pointer;">Accordion Title THREE<small> (click to reveal) </small></summary>
<p style="padding-left: 40px;">Your content here.</p>
</details>

📖 Move on to the NEXT CHAPTER of this adventure