In this tutorial, I will show you how to add a search field to the Elementor toggle element, so that you can create amazing UX for Frequently Asked Questions pages.
Of course, it also works for any other page where there is a lot of information, and where the users would benefit from it being searchable.
See the demo here:
- Great UX: Make it easy for your users to find what they are looking for
- Fast result preview: Mark up queried words in the toggle's content
- Get the relevant results first: Automatically sorts the toggles by the amount of matches with the search query
- Load More feature: Avoid having your page too busy, and have a 'load more' button instead (optional)
- Style it your way: Style the search field as you wish, with simple CSS
- Native Elementor, when possible: The 'load more' button and the 'showing xx out of xx' text are Elementor elements, so no custom CSS is needed to style them
- Customizable texts: Change the texts to what you want
- Works with the Elementor toggle element (one per page*)
- Simple to create: copy paste the code provided on top of your Elementor toggle element, and it works directly
*I could have added compatibility for multiple toggle element per pages, however I believe most people will be using the toggle along with the FAQ Schema:
According to Elementor's documentation, the FAQ Schema can only be used one time per page.
Let's get started!
First, add an HTML element above your Elementor FAQ toggle