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! now supports multiple toggle elements on the same page (and quick search buttons)
Features:
- 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
- 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
- Works with multiple toggle Elements on the same page, with Schema! The schema from all the toggle elements is merged into a single Schema object to be compatible with Google's requirements
- Simple to create: copy paste the template directly in thanks to the new Paste from another site feature
Let's get started!
First, add an HTML element above your Elementor FAQ toggle
This is a premium tutorial. Purchase access to unlock the full tutorial.
43 Responses
Is it possible the search results contain all keywords, not one of them?
Hey Nikos!
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:
if (searchTerms.length > 1) { if (matchesAmount > 1) { return true; } else { return false; } } else { if (matchesAmount > 0) { return true; } else { return false; } }By
if (searchTerms.length == matchesAmount) { return true; } else { return false; }Cheers!
Thank you !!!
Hi,
Thank for this nice tutorial !
For the title (with the given code), the CSS Class should be count-message (without S)...
Kindly,
Olivier
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
let list = Array.from(document.querySelectorAll('.elementor-toggle .elementor-toggle-item')),To
let list = Array.from(document.querySelectorAll('.elementor-accordion .elementor-accordion-item')),and this line
displayLists = document.querySelector('.elementor-toggle'),to
displayLists = document.querySelector('.elementor-accordion'),Let me know how that works out! Cheers!
Your solution of changing classes didn't work for me, and an S is also missing in: displayList or if the code is displayListS
Hey Orlando!
This tutorial is really made to work with the Toggle element, please use that for better results.
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?
thx
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!
Hey Maxime,
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
--Dan
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.
Hey,
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...
I have the same questio. FAQs are organized by topic and each topic has a heading... Have you did any extra coding to this?
Hey Chell!
I just added support for this. You will need to go through the tutorial again and import the code fresh.
Cheers!
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/
Hey Joey!
Thanks for sharing your URL! With it I was able to find the problem.
The problem is this CSS:
[hidden] {
display: none !important;
}
Found in this file:
https://resortnrdisney.wpenginepowered.com/wp-content/themes/disneybots/css_sass/bootstrap.css?ver=6.1.1
Please delete the !important, and it should work fine.
Cheers!
Hi Maxime,
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
Greetings Ruimeng,
In the code, try increasing this to 999, let me know if it works as you want it too then!
itemsShownByDefault : 999,
Cheers!
Hello Maxime
I am encountering a few issues with this tutorial and would be grateful for some advice/updates.
1. I would like to add multiple toggle elements and I am unable to copy and paste the code from 'Example 2'. When I go to paste this, I receive the following error message - "Make sure that both sites are updated to the latest version of Elementor and have enabled the features relevant to the copied element before trying again". Perhaps you could paste the correct code in response to this comment? For reference, I am using Elementor and Elementor Pro vs 3.13.0.
2. The screenshot of the Navigator you have posted above shows 'containers'. These have now been replaced by 'sections'. As such, I am not sure how to correctly set up the structure of the page. At the moment, each 'section' heading is visible in the search results... even when there is no FAQ containing the search criteria (I'm guessing this is because I am using the code I have copied from the 'Copy code' above and not from 'Example 2'?). Please can you advise me of the solution?
3. No matter where I add the CSS styling for the search highlight colour I am unable to make this work. Please can you clarify exactly where to paste this?
I've managed to get everything else working just fine, so if you could help me with the above, that would be fantastic!
Thanks
Hey John!
Really sorry about these issues. I should have mentioned clearly in the tutorial that this will work if you have the Containers enabled only.
This is valid for both the copy paste, and the multiple toggle per page.
It doesn't work with the old Elementor sections. I am stopping supporting them as now Elementor is clearly moving to the Containers, and the sections are less efficient / more DOM heavy, and more troublesome to work with generally.
So please go in WP > Elementor > Settings > Features > Enable Containers. Then try copy pasting in again, and let me know!
Cheers!
Hi Maxime
No problem (and thank you for getting back to me so quickly). Your solution worked perfectly! I also got the CSS working when I edited the HTML code that I had copied and pasted from example two.
Thanks!
Hi Maxime, how do you remove the input zoom in effect on mobile? or is it inner to Safari and Chrome?
Greetings,
I think the way to avoid this is to be certain that the font size, within the input box, is at 1rem / 16px or over.
Let me know if that works for you.
Maxime,
J'ai beau essayé mais je ne comprends pas pourquoi ça ne fonctionne pas avec mon code. C'est bien avec le widget toogle.
Maxime,
J'ai fais toutes les étapes et aucunes réaction de la part du code. Pouvez vous m'aider. Merci
Bonjour Samira,
Oui certainement, SVP partager avec moi votre page test.
Merci!
https://lavienew.kinsta.cloud/faq/?preview_id=3262&preview_nonce=9688a2b1f9&preview=true
Ca fonctionne pas parce que le code est traduit aussi!
Visite la page ici sans le traducteur Google, et ensuite copy / paste le code. La, ca devrait fonctionner.
Yes !! Merci beaucoup Maxime !
as of may 2024, elementor removed the toggle element
https://elementor.com/help/accordion-widget/
If you activate the nested elements experimental feature, the new Accordion widget incorporates the capabilities of Toggle widget and replaces it. This means the Toggle widget will no longer be available. Existing toggles are unaffected by this change and they can still be edited.
i need a solution where the default load is on collapse all mode, thanks.
found the solution:
just deactivate nested elements experimental feature for the toggle element to show
Greetings Joel!
Importing one of the provided template files should have worked too.
I'm not using the new accordion element in this tutorial as it is just too buggy when you have many items.
I tried. I got a template ready with it and I was about to update the tutorial, but the editor was very buggy.
So instead we are using the normal toggle element, which is 100% reliable.
Cheers!
Does this code have any security vulnerabilities? I'm asking because I would like to use it on a client's site. They recently were a victim from a javascript injection malware attack. So far, this code is the only solution I can find for the type of search functionality that they are looking for - live, on-page, search results of their FAQ page.
I do not have in-depth knowledge of security. I just want to make sure this will be a safe code snippet to add to their website.
And, would installing a security plugin like Wordfence flag this code if it ends up catching a vulnerability?
Thanks in advance. Apologies of the terminology is accurate.
Hey Jeni!
No the code doesn't have security flaws, and it cannot become vulnerable at some point in the future. That's one advantage of using straight CSS and JS snippets, and not installing plugins that rely on PHP, it's inherently more secure.
In cases where there isn't even any server call (like here and nearly all of my code snippets), it's 100% secure.
Cheers!
Maxime,
Thank you for the quick response! And that's great to hear! I'm hoping to get this working on their FAQ Page.
Thanks again!