Elementor FAQ with Search Filtering - No Plugins Needed

Elementor FAQ with Search Filtering - No Plugins Needed

Just Released: 10 Popular Web Hosts Tested In Depth

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! 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.

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor FAQ with Search Filtering - No Plugins Needed
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
  • Launch offer discounts!This all inclusive package is freshly released and to celebrate, there is a special discount available:

    10% for new customers with coupon code LAUNCH10

    20% for existing customers with coupon code LAUNCH20

    Available for a limited time only.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

29 Responses

    1. 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!

  1. Hi,
    Thank for this nice tutorial !
    For the title (with the given code), the CSS Class should be count-message (without S)...
    Kindly,
    Olivier

    1. 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?

      1. Sorry I missed your response. I have websites where there are already two or three dozen FAQs that use Accordions.

      2. 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

        displayList = document.querySelector('.elementor-toggle'),

        to

        displayList = document.querySelector('.elementor-accordion'),

        Let me know how that works out! Cheers!

  2. 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

    1. 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

      1. 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

  3. 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

    1. 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!

  4. 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.

    1. 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.

      1. 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...

      2. I have the same questio. FAQs are organized by topic and each topic has a heading... Have you did any extra coding to this?

      3. Hey Chell!

        I just added support for this. You will need to go through the tutorial again and import the code fresh.

        Cheers!

    1. 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/

  5. 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

  6. 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!

  7. 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

    1. 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!

      1. 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!

    1. 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.

Leave a Reply