Elementor FAQ with Search Filtering - No Plugins Needed
CSS Course ➜
CSS Course Chapters

Elementor FAQ with Search Filtering - No Plugins Needed

Check out our CSS Course, made especially for Elementor users.

CSS Course For Elementor Users

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:

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
  • 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:

Elementor FAQ with Search Filtering - No Plugins Needed 1

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

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

 

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

22 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

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

        to

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

        Let me know how that works out! 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...

    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!

Leave a Reply

Become the CSS ninja your were meant to be with our CSS course for Elementor users!

CSS Course For Elementor Users
Elementor FAQ with Search Filtering - No Plugins Needed

Awesome new Elementor designs, right in your inbox.

Just fill in your email.

Navigation

Quick links

Social

Make a donation:
Created by
Elementor FAQ with Search Filtering - No Plugins Needed