Table of Contents
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:
New! with 'quick fill' keyword buttons:
- 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
- NEW: Quick fill buttons: Make it very easy for your users to know what to search for by providing shortcuts to specific relevant keywords
- 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 elements per page, 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
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Is it possible the search results contain all keywords, not one of them?
The way I coded this to work is that if there are two or more keywords entered, there needs to be at least 2 of them present for the result to return as a match.
I think that's the optimal way to keep the search flexible, while returning accurate results. Along with sorting by most matches, it makes this as accurate as possible, while still being a quite simple search algorithm.
That said, you might have a use case where you need all of them to match. So here is how:
Replace all of this:
Thank you !!!
Thank for this nice tutorial !
For the title (with the given code), the CSS Class should be count-message (without S)...
Any chance this code could be modified to work with Elementor accordions?
It's possible, however the difference between the accordions and toggles is that toggles can have more than one opened.
Here I have it set, and I think it's optimal UX, so that when the user searches, all the toggles automatically expand.
With accordion, you could not set it this way, at least not without overriding the default behaviour.
May I ask, why would you like this to work with Accordions instead?
Sorry I missed your response. I have websites where there are already two or three dozen FAQs that use Accordions.
I understand... however this tutorial is really meant to work with the Toggle element. Copy pasting everything over would be ideal.
If you really need this to work with the Accordions, here are the modifications you need to make. However be aware the UX might not be ideal when the user will click to open and collapse an accordion, after searching.
Change this line
and this line
Let me know how that works out! Cheers!
Maxime, Very nice work. And it's working for me.
I like the interface very much.
I am trying to get this to work inside a TAB widget.
To be clear, I first created "elementor-faq-with-search-filtering" work as a section.
I then placed, the section's shortcode inside the contents of an item inside the TAB.
The TOGGLE widget still works but the search feature did not. Is there something in the HTML widget I could edit?
Ok. Odd. I could have swore I saw this working within the TAB widget. I didn't alter or inadvertently save old code either. I checked that your fix is there -- it is. It IS working on the test page OUTSIDE of the tab widget.
I cleared cache. Server cache too. Refreshed but not getting the proper result, nothing expanded, nothing found, nothing highlighted.
All links and user credentials are still good if your able to give a look-see. thx much
I restored a back-up and that's working.... I have NO idea what was different. At some point in pixel living, you just move on. I look forward to more tutorials. Thx
Cheers glad to know you solved that one!
thx for the fix earlier.
Follow-up usage question. I am trying SHORTCODES in the answer area.
I click "Dynamic Tags" then choose Site > Shortcodes.
Then click the wrench and there I paste my shortcode, but it doesn't actually render.
Do you know why?
And by the way, even if did ... would it work in this configuration?
The links and user login are still valid if you want to take a look. thx
Try to simply use the shortcodes directly in the content instead of clicking that "dynamic tags" icon.
In other words, just copy paste your shortcode in there.
Yes it should work, I have other users who successfully used it that way!
Thanks Maxime - your solution for accordions worked brilliantly.
I have a follow-up question. One client has series of FAQs for different topics. I save the FAQs for each topic as a Global Widget. On the FAQ page that has all FAQs, the FAQs are organized by topic and each topic has a heading followed by the topic's FAQ Global Widget. Your code works perfectly for returning FAQs from the different Global Widgets. But it also returns all the headings even if they don't have the keyword. Is there a way to exclude the headings in the search results (to display only search results from FAQs)? That way I can maintain the current heading structure.
This is possible, however it requires a good amount of extra coding. It's also not an ideal use case, as then you won't be able to properly generate the FAQ Schema, which is limited to one Toggle or Accordion element per page.
If SEO isn't too much of a concern though, you can send me a message and I could code this for you as custom work.
Thanks. I want to keep a topic's FAQs on that topic's page and then replicate all of them on the All FAQs page. I suspect I will have to create each FAQ as a separate page and then insert the FAQ in a toggle or accordion. That way, if I update content in one FAQ, it updates everywhere. A bit awkward but...
Maybe I am making a silly error, but I am getting a server error 403 when I try to save this. Hosting is WPEngine.
So I figure out the issue was specific to Wordfence and once I disabled I was able to save.
I did run across a new issue, and it is that once I do a search, the filter works and shows applicable results but with the answers not expanded. toggleOpenOnSearch is set to true. It seems to work if I search for something that is only in the answer, but if I search for a keyword that is in the question it won't expand, even if the keyword is in the answer as well. This isn't consistent though. In some scenarios, it expands and in others it doesn't. You can see it in action here: https://www.resortneardisney.com/faq/
Thanks for sharing your URL! With it I was able to find the problem.
The problem is this CSS:
display: none !important;
Found in this file:
Please delete the !important, and it should work fine.
Thank you for sharing, it really great. The keyword function works perfectly. BUT I have one trouble.
On my FAQ page, I have several Toggles separated by topics (headings). Once I insert the HTML search function, then only the first three parts will be shown. Is it anyhow possible to display all the toggle sections on my page? It would look a bit strange to others if they can only see the founded FAQ with keywords but the actual toggle part is completely missing. thank you
In the code, try increasing this to 999, let me know if it works as you want it too then!
itemsShownByDefault : 999,