Elementor FAQ with Search Filtering - No Plugins Needed

Elementor FAQ with Search Filtering - No Plugins Needed

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:

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
  • 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 element per pages, 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.

 

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

6 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?

Leave a Reply