Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The reliable way to add a jQuery FAQ accordion in WordPress is to enqueue WordPress’s registered jQuery UI Accordion dependency, load your own initialization file after it, and use the required header–panel HTML structure. Because WordPress runs bundled jQuery in noConflict() mode, wrap your code so $ is safely mapped to jQuery. You must also supply your own component CSS; WordPress core does not include a complete jQuery UI theme.
What the accordion needs
There are three separate pieces:
- FAQ markup made of alternating question headers and answer panels.
- WordPress-enqueued assets, with your script depending on the registered
jquery-ui-accordionhandle. - Initialization code and scoped CSS for layout, focus, and open or closed states.
1. Add the required FAQ markup
jQuery UI Accordion expects each answer panel to be the immediate next sibling of its question header. Keep that pairing intact; inserting another element between them breaks the widget’s required structure.
<div id="faq-accordion" class="faq-accordion">
<h3>How do I add the accordion?</h3>
<div>
<p>Load the scripts through WordPress and initialize the widget.</p>
</div>
<h3>Why does the dollar sign fail?</h3>
<div>
<p>WordPress runs bundled jQuery in noConflict mode.</p>
</div>
</div>Use descriptive heading text for real questions. The heading and panel pattern is the contract the Accordion widget uses to identify each item.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall2. Enqueue jQuery UI and your files in WordPress
Put the following in your theme’s functions.php (or in a functionality plugin). Register assets on the front-end wp_enqueue_scripts hook rather than hard-coding script tags in the page header.
function mytheme_faq_assets() {
wp_enqueue_style(
'mytheme-faq',
get_stylesheet_directory_uri() . '/css/faq.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'mytheme-faq',
get_stylesheet_directory_uri() . '/js/faq.js',
array( 'jquery-ui-accordion' ),
'1.0.0',
array( 'in_footer' => true )
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_faq_assets' );The dependency array is important. WordPress has a registered jquery-ui-accordion handle; declaring it tells WordPress to load that widget and its prerequisites before faq.js. The final argument requests footer loading, which keeps the custom file out of the document head when the theme supports that placement.
Load assets only where the FAQ exists
For a single template or block, you can conditionally call the enqueue function—for example, from a template that actually renders the FAQ. If the component appears throughout the site, the unconditional front-end hook above is simpler. Do not enqueue a second copy of jQuery manually; use WordPress’s registered handles.
Rank #2
3. Initialize the widget without breaking WordPress jQuery
Create js/faq.js with an immediately invoked function expression (IIFE):
Recommended Free Tools
(function ($) {
$(function () {
$('#faq-accordion').accordion({
collapsible: true,
heightStyle: 'content'
});
});
})(jQuery);WordPress loads its bundled jQuery in noConflict() mode, so the global dollar alias is not guaranteed. Passing jQuery into the IIFE creates a local $ that is safe inside the wrapper. The document-ready callback waits until the page is ready, then initializes the element selected by #faq-accordion.
Rank #3
What the options do
| Option | Value | Effect |
|---|---|---|
collapsible |
true |
Allows the currently open answer to be closed, leaving all panels closed. |
heightStyle |
'content' |
Sizes each panel to the height of its own content. |
Remove or change either option when the interaction you want differs. The selector must match the ID or class on your FAQ container.
4. Add focused CSS
Core WordPress does not ship a complete jQuery UI theme. Style the component yourself or enqueue a compatible stylesheet, and scope selectors to the FAQ so unrelated accordions and headings are not changed.
.faq-accordion h3 {
margin: 0;
padding: .8rem 1rem;
cursor: pointer;
}
.faq-accordion h3:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.faq-accordion .ui-accordion-content {
padding: 1rem;
}Extend these rules for borders, colors, open-state indicators, and narrow screens according to your theme. Keep the visible focus outline; removing it makes keyboard navigation harder to follow.
Accessibility and interaction choices
Use meaningful headings and visible focus
Questions should be actual, descriptive headings rather than generic labels such as “Click here.” Test that a keyboard user can move to each question, identify the focused item, open it, and close it when collapsible is enabled.
Consider the native Accordion block
If you do not need jQuery UI’s widget options or custom integration, WordPress’s native Accordion block is an alternative. Its documented pattern makes headings act as buttons and exposes expanded or collapsed state to assistive technologies. It also removes the custom jQuery dependency and initialization file. Choose the native block when its markup and styling controls meet your needs; choose jQuery UI when you specifically need its established widget API or an existing jQuery-based asset pipeline.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.jQuery UI versus the native WordPress Accordion block
| Consideration | Custom jQuery UI | Native Accordion block |
|---|---|---|
| Dependencies | Requires the registered jquery-ui-accordion handle, your script, and your CSS. |
No custom jQuery initialization is required. |
| Markup and styling control | Full control over the container, header/panel markup, widget options, and component CSS. | Uses the block’s documented structure and controls. |
| Asset pipeline | Fits themes or plugins already built around WordPress’s jQuery UI handles. | Fits a block-first workflow with fewer custom assets. |
| Documented interaction | You must preserve the header/panel contract and verify your implementation’s keyboard and assistive-technology behavior. | Documentation describes headings as buttons and panels announcing expanded or collapsed state. |
Troubleshooting common failures
“$ is not a function” or an undefined dollar alias
Do not assume $ is global. Use the IIFE shown above, or call methods through jQuery explicitly. Also confirm that your file is enqueued with jquery-ui-accordion as a dependency.
The accordion method is undefined
Check that the custom script is enqueued on the front end, that its dependency is exactly jquery-ui-accordion, and that the selector matches an element present in the rendered HTML. A direct script tag or a misspelled handle can bypass WordPress’s dependency ordering.
Panels do not open correctly
Inspect the generated markup. Every header must be immediately followed by its associated panel inside the same accordion container. Extra wrappers, comments rendered as elements, or unrelated nodes between a header and panel can violate the widget’s expected pairing.
The accordion looks unstyled
That is expected if you enqueue only the JavaScript. Add the scoped CSS file, verify its path, and check that your theme has not overridden the component’s padding, display, or focus rules.
Quick Recap
Implementation checklist
- Place alternating question headers and panels in the FAQ container.
- Enqueue CSS and JavaScript from
wp_enqueue_scripts. - Declare
jquery-ui-accordionas the custom script dependency. - Wrap initialization so local
$is mapped tojQuery. - Set Accordion options such as
collapsibleandheightStyledeliberately. - Scope CSS, preserve visible keyboard focus, and check responsive layouts.
- Test keyboard operation and the behavior announced by your assistive technology.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
