Skip to main content

How to Create a Q&A Section Using Query Builder in Tabs and Accordion Widgets

In this guide, we’ll create a Q&A section for a Custom Post Type (CPT) using JetEngine’s Query Builder and Tabs or Accordion widgets.

Updated over 6 months ago

1. Creating a Q&A Section with Repeater Meta Field

Step 1: Add a Repeater Meta Field to Your CPT

  1. Navigate to JetEngine > Post Types > Your CPT.

  2. Add a new meta field and set its field type to Repeater.

    • Create two subfields within the repeater:

      • Question (Text field)

      • Answer (Text, WYSIWYG or Textarea field)

  3. Save the changes.

Step 2: Add Questions and Answers to Posts

Go to your posts and fill in the newly created Repeater meta field with your questions and answers for each post.


Step 3: Create a Repeater Query

  1. Navigate to JetEngine > Query Builder > Add New.

  2. Select Query Type: Repeater Query.

  3. Configure the query settings:

    • Source: JetEngine Meta Field

    • JetEngine Field: Select your repeater meta field.

    • Object ID: Set to Current ID.

    • Leave other settings as they are.

  4. Save the query.


Step 4: Display the Q&A Section in a Single Post Template

We’ll use the Tabs or Classic Accordion widget to display the Q&A section.

  1. Open the Single Post template in Elementor.

  2. Add the Classic Accordion widget.

  3. Enable the “Use JetEngine Query” option.

  4. Select your newly created query.

  5. Leave only one item in the widget by deleting the default ones.


Step 5: Populate the Accordion with Dynamic Data

  1. Set Content Type to Editor.

  2. Use the Dynamic Tags option to populate the label and content fields.

  3. Select Current Object Field and choose the appropriate subfields for Question (label) and Answer (content).


2. Creating a Q&A Section Using Options Page

If you want to display the same Q&A section on multiple pages, you can use Options Page and a repeater meta field.

Step 1: Create an Options Page

  1. Navigate to JetEngine > Options Pages > Add New.

  2. Add a repeater meta field with subfields for:

    • Question (Text field)

    • Answer (Text, WYSIWYG or Textarea field)

    • Media (Media field, optional for images).

  3. Save the Options Page and add your questions and answers.


Step 2: Create a Repeater Query for Options Page

  1. Navigate to JetEngine > Query Builder > Add New.

  2. Select Query Type: Repeater Query.

  3. Configure the query settings:

    • Source: JetEngine Option Field

    • JetEngine Option: Select your repeater meta field.

  4. Save the query.


Step 3: Create an Elementor Template for the Content

  1. Navigate to Templates > Saved Templates > Add New Template.

  2. Create a Section Template.

  3. Add a Dynamic Field widget to display the answer.

  4. Save the template.


Step 4: Display the Q&A Section with Media

  1. Add the Tabs widget to a page in Elementor.

  2. Enable “Use JetEngine Query” and leave only one item.

  3. Fill the Label with the Current Object Field dynamic tag.

  4. To display an image:

    • Enable the “Is Image” option.

    • Use the Current Object Image Field dynamic tag to select the media meta field.

  5. Set the Content Type to Template and select your newly created Elementor template.


Final Result

You should now see your Q&A section displaying the question, answer, and optional media content.

Did this answer your question?