HTML Details Generator
Generate a <details> / <summary> collapsible section — set the summary, the hidden content, and whether it starts open, then copy the ready-to-use HTML. Free, instant, no AI involved.
Input
Settings
Give several <details> the same name to make them an exclusive accordion — opening one closes the others.
Add custom CSS classes to the element. Separate multiple classes with spaces.
Output
Your element will appear here.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-generator/details \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"customSummary": "Read more",
"customContent": "Hidden text.",
"customOpen": "",
"customName": "",
"customClasses": ""
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `html-generator__details` tool (HTML Details Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/html-generator/details/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTML Details Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
Build a ready-to-paste <details> / <summary> collapsible section — the native HTML way to hide and reveal content without JavaScript.
Runs entirely in your browser: no AI call, no credits, no network round-trip. The output updates instantly as you type.
How to use it
- Type the Summary (the always-visible heading) and the Content that is revealed on click.
- Optionally check Open by default, or set a Group Name — several sections sharing the same name behave as an exclusive accordion where opening one closes the others.
- Copy or download the generated HTML.
Why is there no live preview?
The output is real, unsanitized markup — rendering it directly on the page isn't safe. Paste the code into your own page to see it in context.