<details>

HTML Details & Summary — Live Demos

5 examples · zero JS for core behavior

Exclusive Accordion — name attribute only

All three items share name="pricing". Opening one automatically closes the others. Zero JavaScript. Try it — then check the log for toggle events.

name="pricing" ✓ Zero JS ✓ Keyboard accessible
🚀 Starter Plan — Free
Up to 3 projects, 1GB storage, community support, and access to all core features. Perfect for personal projects and learning.
⚡ Pro Plan — $29/month
Unlimited projects, 50GB storage, priority email support, API access, GitHub integration, and team collaboration for up to 10 members. Most popular.
🏢 Enterprise — Custom pricing
Dedicated infrastructure, 99.9% uptime SLA, custom integrations, SSO/SAML, audit logs, compliance reports, and a dedicated account manager.
--:--:--Click any item — watch others close automatically

That's the entire HTML

<details name="pricing"> <summary>Starter — Free</summary> <!-- content --> </details> <details name="pricing" open> <summary>Pro — $29/mo</summary> <!-- content --> </details> <details name="pricing"> <summary>Enterprise</summary> <!-- content --> </details> // ↑ That's it. No JavaScript. Same name = exclusive group.

Animated Accordion — CSS grid-template-rows trick

Content expands and collapses with a smooth animation. The close animation is handled by a small JS intercept that lets the CSS transition finish before removing open.

grid-template-rows: 0fr → 1fr ✓ Smooth open & close
What's included in every plan?
Every plan — including the free tier — includes SSL certificates, automatic backups, global CDN, 99.9% uptime SLA, and access to our developer API. Paid plans add team collaboration, priority support, and advanced analytics.
How does team collaboration work?
Invite teammates via email. Each member gets their own login with role-based access: Owner, Admin, Editor, or Viewer. Owners and Admins can manage billing, team members, and project settings. Editors and Viewers have scoped access to specific projects.
Can I migrate from another platform?
Yes. We provide automated migration tools for WordPress, Webflow, and Ghost. For other platforms, our migration guide walks you through a manual export/import. Pro and Enterprise plans include a complimentary migration review with our team.
What happens if I exceed my storage limit?
You'll receive an email warning at 80% and 95% usage. Once you hit the limit, new uploads are paused but existing content stays live. You can upgrade your plan anytime or purchase additional storage in 10GB increments from your account settings.
--:--:--Watch the smooth expand and collapse animation

The grid trick — 5 lines of CSS

/* Outer wrapper: collapses to 0, expands to full height */ .anim-body { display: grid; grid-template-rows: 0fr; /* ← collapsed */ transition: grid-template-rows .32s ease; } details[open] > .anim-body { grid-template-rows: 1fr; /* ← expanded */ } /* Inner div: must clip at 0fr */ .anim-inner { overflow: hidden; }

Nested Tree View — No libraries, no JavaScript

Nested <details> elements for a file/folder tree. Fully keyboard navigable. Click a file to "select" it (highlighted).

Nested details ✓ Keyboard navigable
--:--:--Expand folders and click files to select them

Custom Styled Accordion — Icon + subtitle + animated arrow

Each item has an icon, title, subtitle, and animated circular arrow button. The default triangle marker is completely replaced. Grid animation included.

Custom marker ✓ Grid animation
🔔
Notifications Email, push, and in-app alerts
▾

Control how and when you receive notifications. Choose between real-time push alerts, daily digest emails, or in-app badges only. Notification preferences can be set per-project or globally for your account.

🔒
Privacy & Security Two-factor auth, sessions, data export
▾

Enable two-factor authentication via an authenticator app or SMS. View and revoke active sessions across devices. Download a full export of your account data at any time — exported as a JSON archive within 24 hours.

💳
Billing & Invoices Payment methods, history, receipts
▾

Manage payment methods (cards, PayPal, wire transfer for Enterprise). Download PDF invoices for any billing period. Set up automatic tax ID inclusion for invoices. All billing is handled via Stripe — we never store card details.

🗑️
Danger Zone Delete account, transfer ownership
▾

Permanently delete your account and all associated data. This action cannot be undone. Before deleting, you may transfer ownership of projects to another team member. Account deletion is processed within 30 days per our data retention policy.

--:--:--Watch the icon, subtitle, and circular arrow animate on toggle

Frequently Asked Questions

Paired with JSON-LD schema for Google FAQ rich results. View source to see the structured data.

What is your refund policy?
We offer a full 30-day money-back guarantee on all plans, no questions asked. Contact our support team and we'll process your refund within 2 business days. Refunds are issued to the original payment method.
Do you offer a free trial?
Yes — every plan includes a 14-day free trial with full access to all Pro features. No credit card is required to start. At the end of the trial, you'll be prompted to choose a plan or your account automatically downgrades to the free tier.
Can I use this for commercial projects?
Absolutely. All plans — including the free tier — allow commercial use. Enterprise customers receive additional licensing terms for white-labeling and redistribution. See our Terms of Service for full details.
How do I cancel my subscription?
Cancel anytime from your Account Settings → Billing → Cancel Subscription. Your access continues until the end of your current billing period. We don't charge cancellation fees. You can re-subscribe at any time.
What payment methods do you accept?
We accept all major credit and debit cards (Visa, Mastercard, Amex, Discover), PayPal, and Apple Pay. Enterprise customers can pay by wire transfer or invoice. All payments are processed securely through Stripe.
--:--:--Toggle questions — scroll down to see the JSON-LD schema

JSON-LD Schema (in the <head>)

This structured data tells Google to show expandable FAQ rich results in search. Validate at search.google.com/test/rich-results.

{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is your refund policy?", "acceptedAnswer": { "@type": "Answer", "text": "We offer a full 30-day money-back guarantee..." } }, // ... repeat for each question ] }
Read the tutorial