Filtering the Accordion Contents with Search Keyword

In this article I am showing how you will filter the FAQs page with search keyword. Here I built the FAQs page with Beaver Builder’s accordion module and added the search form with HTML module. Later I connected the search form with accordion module and filtering the content. See the full steps at below:

Creating the FAQs page

At first you will create the FAQs page with BB page builder.

  1. Login to Dashboard
  2. Create a New Page
  3. Click on Page Builder button
  4. Drag&Drop the HTML module
  5. Enter the following HTML codes there
    <div class="faq-search">
        <i class="fa fa-search" aria-hidden=true aria-label="Search"></i>
        <input type="text" id="search-faq" onkeyup="filterAccordion()" placeholder="Search for questions/answers..">

    It will create the search form

  6. Click on Save Button
  7. Drag&Drop the Accordion modules and create the FAQs list
  8. Click on Save Button

Adding the Custom CSS

Rest of the contents are only available to members. You must subscribe the MEMBERSHIP plan. You already subscribe the plan? Login at below.


1 Comment

  1. Jennifer Weed on April 27, 2020 at 6:52 pm

    Is there a way to have text that appears if the search doesn’t have any results to display?

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials