Build Your Own Accordion
When the ready-made Accordion styles don't match your design, build your own with the UiChemy Composer widget.
The Accordion widget comes with a few ready-made styles to choose from. When none of them fit, click the Learn More button inside the widget, then follow the steps below to build your own design with the UiChemy Composer widget.
Steps
Install the free UiChemy plugin
In your WordPress dashboard, go to Plugins → Add New Plugin, search for UiChemy, click Install Now, then Activate. See Install and Activate UiChemy.
Connect your AI tool (MCP)
Once UiChemy Pro is activated, go to UiChemy → Home and select the AI Agent (MCP) tab.
- Click Generate connection. This issues a secure Application Password so your AI tool can reach this site.
- Under Pick your AI tool, choose Claude Desktop, Cursor, Codex, Antigravity, or Other.
- Under Add the MCP server, use the Prompt or Config switch, click Copy, and add it to your AI tool.
- Restart your AI tool.
Full steps for each tool are in Set Up AI to WordPress.
Copy the prompt
Copy this prompt, paste it into your AI tool, replace the parts in square brackets with your own details, and send it.
Using UiChemy on my WordPress site, add a Composer widget to the page "[page name]".
The ready-made Accordion styles don't match my design, so build my own accordion with HTML, CSS and JavaScript showing [5] items.
Each item: a question as the title and the answer as the content: [paste your questions and answers].
Open one item at a time, keep the [first] item open by default, and use a plus / minus icon with a smooth open and close animation.
Make it full width and easy to tap on mobile.
Match my site's colours and fonts.
Your AI tool builds a native, editable Composer on that page. Ask for changes in the same chat until it looks right.
Prefer to code it yourself? Add the Composer widget to your page and write the HTML, CSS and JavaScript in its Code tab. See Code Tab.