12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Oct 6, 2021

How to automatically expand first accordion when using OxyExtras and WP Grid Builder

Sridhar Katakam

In a site that I am currently building with Oxygen from Figma designs, the requirement is to show FAQ CPT items on the CPT archive page with search and custom taxonomy filters. The accordion items are to be collapsed except the first one both on the initial page load as well as after filtering is completed.

My current go-to for easy and quick filters setup is WP Grid Builder.

I already wrote a tutorial earlier on how to use OxyExtras Accordion and the built-in Repeater components for a posts accordion here.

This members-only tutorial provides the JavaScript code to automatically click the top-most accordion item on page load and after the filtering by WP Grid Builder is finished.

The following JS can be added via a Code Block in the Template or using a custom functionality plugin:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right