# WordPress: Use AI to Make Custom Blocks (Free Accordion Example)

URL: https://www.laserlloyd.com/projects/wordpress-use-ai-to-make-custom-blocks-free-accordion-example/
Published: 2025-03-12
Updated: 2026-09-16
Description: A free copy-paste accordion block for WordPress: plain HTML and CSS, no plugin, no JavaScript. Plus the AI prompt that wrote it and the install steps.
Reuse: free for personal use — full policy at https://www.laserlloyd.com/llms.txt

I wanted an accordion on my WordPress site. Every "free" plugin I tried was an upsell with a settings page. So I had an AI write me one: 25 lines, no plugin, no JavaScript, and you can have it.

Update, July 2026: this post sat in drafts for over a year promising "the code below" with no code below. Here it is. Sorry about that.

tl;dr

What it is: a copy-paste accordion (collapsible FAQ panels) for WordPress. Plain HTML and CSS.
What it costs: nothing. No plugin, no account, no "pro" tier.
What you need: a WordPress site and the ability to paste into a Custom HTML block.
What you end up with: the working accordion below, plus a reusable prompt for getting an AI to build you other custom blocks.

What you end up with

This is a live demo. It's the exact code from the next section, pasted into this page the same way you'd paste it into WordPress. Click the panels:

.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }

  
    Question one goes here
    Answer one goes here. Text, links, pictures, whatever you want.
  
  
    Question two goes here
    Answer two. Add more panels by copying one whole details block.
  
  
    Question three goes here
    Answer three. Delete panels the same way.
  

It opens and closes with zero JavaScript because the browser's built-in <details> element does the collapsing for us. Every browser has supported it for years.

The code

```html
<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>
```

Things you'll probably want to change:

The words. Swap the placeholder questions and answers right in the block. The answer areas take normal HTML, so links and images work.
Panel count. Copy one whole &lt;details&gt;...&lt;/details&gt; chunk to add a panel; delete a chunk to remove one.
Start opened. Change a panel's opening tag to &lt;details open&gt; and it loads expanded.
Colors. The grays are deliberately neutral so they look fine on light and dark themes alike. Swap the rgba(...) values if you want your brand colors.

Put it on your page

These install directions are the ones the AI wrote when I asked for them (see the prompt below). I followed them on a stock WordPress install and they were correct, which was honestly the part I doubted most.

Log in to WordPress and open the page or post where you want the accordion. Hit Edit.
Click the + where the accordion should go and search for the block called Custom HTML.
Paste the whole snippet into it, both the &lt;style&gt; part and the &lt;div&gt; part.
Click the block's Preview toggle (or the page-level Preview) to see it render instead of raw code.
Update or Publish. Go click your new panels on the live page and feel smug about the plugin money you didn't spend.

The prompt that wrote it

Quick background. I couldn't find an accordion plugin that was free and didn't nag, and I refused to pay a subscription for what is basically twenty-five lines of HTML. Writing those lines yourself is exactly the kind of small, self-contained job AI is genuinely good at. The workflow:

  
    
      
    
  
  
    
    
    
    
  
  
    
    
    
  
  
    Ask the AI
    Scratch file
    in a browser
    Custom HTML
    block
    Live on
    your page
  
  
    copy
    works
    update
  

Any AI that writes code will do:

Run one locally (free, private): I used my own local DeepSeek 70B. If your computer has the muscle, here's my setup guide: Run DeepSeek Locally: a 4-Step Guide.
Or use a free online one: ChatGPT's free tier handles this prompt without complaint.

Here's the prompt. The requirements list is the important part; a vague "make me an accordion" gets you a fragile pile of JavaScript.

```text
Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.
```

That last paragraph is the trick from this post's title: the same AI that writes the code will write the installation manual for it, at whatever skill level you ask for. If a step confuses you, paste it back and say "explain step 3 like I've never seen HTML." It will, patiently, forever. That alone beats most plugin documentation — it's the same "describe it, review it" loop I use for bigger jobs too, laid out generally in how to have an LLM adapt any project to your system.

One habit worth stealing: before the code goes anywhere near your real site, paste it into a file called test.html on your desktop and double-click it. It opens in your browser, no server needed. Click every panel. If something's off, show the AI and say what's wrong. Only after it behaves does it go into WordPress. That's the whole test lab, and it's how I verified the block above.

Gotchas

Use the Custom HTML block, not a paragraph block. Paste code into a regular text block and WordPress helpfully escapes it, so visitors see raw code instead of an accordion.
Two accordions on one page is fine. The &lt;style&gt; chunk gets duplicated, which is ugly but harmless. If it bugs you, put the CSS once under Appearance &rarr; Customize &rarr; Additional CSS and paste only the &lt;div&gt; part into your blocks.
Some themes draw their own summary arrow. The snippet hides the default marker two ways, but a stubborn theme can still paint its own icon next to my +/– glyph. If you see doubles, ask the AI: "my theme adds its own arrow to summary elements, hide it."
Want one-at-a-time panels? Add name="faq" inside every &lt;details&gt; tag. Current browsers will auto-close the other panels; older ones ignore it and nothing breaks.
Don't blind-paste AI output into a live site. The scratch-file test above takes two minutes. Asking for no JavaScript also shrinks what can go wrong, which is half the reason I required it.

Related: WordPress to Static With Claude Code: A Site Rebuilt in an Afternoon · DeepSeek: Running Locally — a 4-Step Guide (No Experience Needed) · How to Have an LLM Adapt Any Project to Your System · Set Up Your LLM Assistant: Claude Code, Cowork, Reasonix and DeepSeek