Disclosure
A summary that folds a panel open, on <details>, and accordion, a run of them with one open at a time through the platform's own <details name>. No script.
Disclosures
A leading chevron turns as it opens. summary takes markup for a badge beside the title.
Advanced options
Timeouts, retries and the like.
Raw payload failed
{ "ok": false, "error": "timeout" }<div class="flex flex-col gap-3">
<%= disclosure "Advanced options" do %>
<p>Timeouts, retries and the like.</p>
<% end %>
<%= disclosure open: true do |d| %>
<% d.summary { safe_join [ "Raw payload", badge("failed", tone: :bad) ], " " } %>
<%= code_view %({ "ok": false, "error": "timeout" }), language: :json, copy: false %>
<% end %>
</div>An exclusive accordion
exclusive: true lets one item open at a time; chevrons trail and turn down.
When am I charged?
On the first of the month, for the month ahead.
Can I change plans?
Any time. The difference is prorated.
What happens to my renders if I cancel?
They stay yours; you can download them for ninety days.
<%= accordion exclusive: true, id: "billing_faq" do |accordion| %>
<% accordion.item "When am I charged?", open: true do %>
On the first of the month, for the month ahead.
<% end %>
<% accordion.item "Can I change plans?" do %>
Any time. The difference is prorated.
<% end %>
<% accordion.item "What happens to my renders if I cancel?" do %>
They stay yours; you can download them for ninety days.
<% end %>
<% end %>