AI Prompt to Create a JavaScript Accordion FAQ

Create an accordion FAQ section using JavaScript from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create an accordion FAQ section for your website using JavaScript. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Generate a complete, single-file HTML document for a FAQ (Frequently Asked Questions) section. Use vanilla JavaScript for the accordion functionality.

Structure:

  • A list of 5 question-and-answer pairs.
  • Each FAQ item should have a question that is always visible and an answer that is hidden by default.
  • The question part should be clickable and include a small icon (e.g., a + or a chevron) that indicates its state (open/closed).

Functionality (to be handled by JavaScript in a <script> tag):

  • When a user clicks on a question, the corresponding answer should smoothly slide open.
  • The icon should change (e.g., from + to -).
  • If another question is already open, it should close when a new one is opened (optional, but preferred).

Core Requirements:

  • Technology: A single HTML file with CSS in a <style> tag and JavaScript in a <script> tag before the closing </body>. Do not use any external libraries like jQuery.
  • Accessibility: The accordion must be fully accessible. Use <button> elements for the question triggers. Use aria-expanded to indicate the state, and aria-controls to link the button to the answer panel. The answer panel should have role="region".
  • Responsiveness: The layout should be fully responsive.
  • Best Practices: The CSS should include a smooth transition for the opening/closing effect. The JavaScript should be clean, efficient, and well-commented.

The Result

When I ran the above prompt against ChatGPT, I got the following result:

Screenshot of neumorphic UI dashboard AI prompt result

(I expanded one item for demonstration purposes).

Comments

I first tried running the prompt in Gemini, but the result had a few issues (the - sign was at an angle, and the first sentence of each answer was being displayed at all times). I tried to resovlve it with a few subsequent prompts. It fixed the first issue, but had trouble with the second. In the end I jumped over to ChatGPT and it produced the above result, which works pretty much as requested.

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.