FAQ / Accordion Section HTML Template
Compatible with Skilljar's HTML sections in pages, courses, and lessons.
FAQ Accordion Widget
Build a collapsible question-and-answer section for a catalog page, course description, or HTML lesson. Add your questions and answers, choose whether one or several can stay open at a time, then paste the generated code into an HTML content block, a course's Long description html field, or an HTML lesson.
Header (optional)
Behavior
Questions
|
Colors
Typography
Font Sizes
Container
Section Padding (px)
Section Margin (px)
Content Spacing (px)
Live Preview
✓ Saved
Extend this template with AI Prompts
Use these prompts to extend this HTML template on your own. Paste your generated code + one of these prompts into Claude or ChatGPT, or any other AI model.
Before you paste a prompt: grab the AI context file from Lesson 1 of the AI with Skilljar course and paste it into your AI chat. This will teach it the Skilljar HTML, CSS, and JS rules.
✦
Copy
Add more than 6 questions
Here is the HTML/CSS/JS for a Skilljar FAQ accordion, currently with a fixed set of questions. Add [N] more question/answer items to the list, matching the existing markup structure, styling, and accordion behavior (including the open/close icon and single- or multi-open logic already wired up in the script). Here are the new questions and answers: [paste your Q&A pairs here]. Return the complete updated code.
✦
Copy
Add a search box to filter questions
Here is the HTML/CSS/JS for a Skilljar FAQ accordion. Add a text input above the question list that filters the visible questions as the user types, matching against the question text (case-insensitive). Hide any question that doesn't match, and show all again when the input is cleared. Return the complete updated code.
✦
Copy
Group questions into categories
Here is the HTML/CSS/JS for a Skilljar FAQ accordion. Group the existing questions under 2-3 category headings (e.g. "Getting Started", "Billing", "Technical"), each with its own small heading above its group of questions. Keep the existing accordion behavior working within each group. Return the complete updated code.
✦
Copy
Add a "Was this helpful?" prompt
Here is the HTML/CSS/JS for a Skilljar FAQ accordion. Below each answer, add a small "Was this helpful?" prompt with Yes/No text buttons that, when clicked, replace themselves with a short thank-you message. Match the existing color scheme. Return the complete updated code.
✦
Copy
Link directly to a specific question
Here is the HTML/CSS/JS for a Skilljar FAQ accordion. Add support for deep-linking: if the page URL hash matches a question's slugified text, automatically open that question and smooth-scroll to it on page load. Also give each question a small "Copy link" action that copies a URL with that question's hash. Return the complete updated code.
Live Preview
Paste into: an HTML content block, a course's Long description html field, or an HTML lesson
Import generated code
Paste the code from a previous session. The configurator will detect the questions and restore your settings from it.