Elementor FAQ Accordion with Search Filtering Without Plugin
Get Premium

Elementor FAQ Accordion with Search Filtering Without Plugin

Element.How also offers premium tutorials! Check them here:

Elementor FAQ Accordion with Search Filtering Without Plugin

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:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

 

Also supports multiple toggle elements on the same page (and quick search buttons)

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

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, import the template of your choice on your FAQ page

This is a premium tutorial. Purchase access to unlock the full tutorial.

Elementor FAQ Accordion with Search Filtering Without Plugin

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor FAQ Accordion with Search Filtering Without Plugin
  • 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
  • 6 months 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.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • 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.
* 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 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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

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

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

        to

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

        Let me know how that works out! Cheers!

      3. Your solution of changing classes didn't work for me, and an S is also missing in: displayList or if the code is displayListS

      4. Hey Orlando!

        This tutorial is really made to work with the Toggle element, please use that for better results.

        Cheers!

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

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

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

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

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

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

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

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

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

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

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

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

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

  18. Hey Maxime, great tutorial. I have a couple of questions. Is there any update to make it work on the new accordion with nested containers? Also, is there a way that I can add a search icon as the X? Finally, any chance to show a container instead the message of "not matches found" (I want to customize the no results)?

    1. Greetings Trevor!

      I already have it working with the new accordions, however it gets really buggy in the editor with anything more than about a dozen accordion items... and the old element doesn't have any such issues, even with 100 items everything works well. So for the purpose of a filterable FAQ, I see no choice but to stick with the old one, at least until Elementor fixes these performance issues.

      If you need other content than text and images in your content, I suggest using the shortcode method. It's not amazing, but at least everything works well and fast. The filtering will still work just fine.

      To show a container, replace this part of the code:

          function generateCountMessage() {
        var msg = '';
        matches = sortedList.length;
        switch (true) {
            case matches === 0:
                msg = settings.messages.noMatchesFound;
                break;
            case matches === 1:
                msg = settings.messages.oneMatchFound;
                break;
            case matches <= maxDisplayLimit:
                msg = settings.messages.allMatchesShown();
                break;
            default:
                msg = settings.messages.matchesFound();
        }
        if (countMessage) {
            countMessage.innerHTML = msg;
        }
    }

      With this:

          let noResultsContainer = document.querySelector('.no-results');
    noResultsContainer.style.display = 'none';
    function generateCountMessage() {
        let msg = '';
        matches = sortedList.length;
        function hideNoResultsAndShowCount() {
            noResultsContainer.style.display = 'none';
            countMessage.style.removeProperty('display');
        }

        switch (true) {
            case matches === 0:
                countMessage.style.display = 'none';
                noResultsContainer.style.removeProperty('display');
                break;
            case matches === 1:
                hideNoResultsAndShowCount();
                countMessage.innerHTML = settings.messages.oneMatchFound;
                break;
            case matches <= maxDisplayLimit:
                hideNoResultsAndShowCount();
                countMessage.innerHTML = settings.messages.allMatchesShown();
                break;
            default:
                hideNoResultsAndShowCount();
                countMessage.innerHTML = settings.messages.matchesFound();
        }
    }

      Then you will need a container with the class 'no-results', it will show only when there are no results.

      Regarding the icon, do I understand correclty you want to replace the X with a search icon? If that's what you want, it might not be ideal... people will click it to proceed with the search, and instead it will erase the search input... Let me know if I misunderstood something here.

      Cheers!

      1. Thanks for your kindly response. What I need with the icon is to show a "search glass" until user start typing, its just to let them know they can use the input to search 🙂

      3. Greetings Trevor,

        The issue is a <b> that isn't closed properly.

        I suggest using <strong></strong> anyway, as it's more modern HTML.

        Find the faulty HTML with the unclosed <b> in the toggle

        "How do I find my Pillur account number?"

        The part that says:

        please call (833) 533-0678 for assistance.

        Cheers!

        Maxime

  19. Hello Maxime, thanks for the tutorial and brilliant code. Any update on using this with Accordions? I don't want to disable nested elements on my site (to access the Toggle widget), but my client has 100 FAQ items that need to be searched and I don't want to run into performance issues. Hoping the recent updates to Elementor have made it possible to use this code with Accordions? Thank you!!

Leave a Reply