Filter and hide text for FAQ

denniscelenlifepowr · March 17, 2022, 6:10pm

Hi there

I’m struggling with a FAQ page I’m building. First I need a solution that shows questions and answers. But in the first view it hides the answers and when you click on the question it shows it. I found the code online, and it worked if I uses it without my following code that I have added.

I want to filter the questions depending on the choices of the user. so if they are a starter or an expert it shows questions that are for them. to do this, I worked with a database and 3 column tags. User type, Category or the Type of the question. (If possible, it would also be nice if there was a search bar, no idea how I have to code that)

When I added the second code, the first code only works when you do not filter it, as soon as you start sorting the questions (it seems that the filtering code works). Then the first code does not work anymore.

Check the website below

the current page:

https://dennis1864.editorx.io/io2web/blank-9-1-1-1

import wixAnimations from 'wix-animations';
import wixData from 'wix-data';
const ACTIVE_COLOR = '#207272';

const DEFAULT_COLOR = '#001E1E';

//$w.onReady(function () {

//});

function initFAQrepeater() {
    $w('#FAQrepeater' ).forEachItem(( $item, itemData, index) => {

        $item('#FAQbutton').onClick(() => {
            openRelevantContent(index);

       });
   });

}

function openRelevantContent(targetIndex) {

   $w('#FAQrepeater').forEachItem(($item, itemData, index) => {
      const contentBox = $item('#FAQcontent');
      const button = $item('#FAQbutton');
     const arrow = $item('#FAQarrow');

      if (targetIndex === index) {

        contentBox.collapsed ? expandFAQcontent(contentBox, button, arrow) : collapseFAQcontent(contentBox, button, arrow);
      } else {
         collapseFAQcontent(contentBox, button, arrow);

      }

   });

}

function expandFAQcontent(contentBox, button, arrow) {
   contentBox.expand();
   button.style.color= ACTIVE_COLOR;
    
   wixAnimations.timeline()

      .add(arrow, { rotate: 270, duration: 300 })

      .play();
}

function collapseFAQcontent(contentBox, button, arrow) {
   contentBox.collapse();
   button.style.color= DEFAULT_COLOR;
   wixAnimations.timeline()

      .add(arrow, { rotate: 90, duration: 300 })

      .play();
}

/**
 *  Adds an event handler that runs when the dataset is ready.
 */
export function FAQdataset_ready() {
   initFAQrepeater()
    // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    // Add your code for this event here: 
}

/// Second CODE for sorting
$w.onReady(function () {
 
    $w("#TagCategory, #TagUser, #TagType").onChange(function () {
        search();
        initFAQrepeater();
    });
 
    function search() {
 
        let filter = wixData.filter();
 
        let catIdx = $w("#TagCategory").selectedIndices;
        let userIdx = $w("#TagUser").selectedIndices;
        let typeIdx = $w("#TagType").selectedIndices;
 
        let catVal = $w("#TagCategory").value;
        let userVal = $w("#TagUser").value;
        let typeVal = $w("#TagType").value;
 
        if (catIdx.length > 0 || userIdx.length > 0 || typeIdx.length > 0) {
 
            filter = filter.hasAll("category", catVal)
                .and(filter = filter.hasAll("userType", userVal))
                .and(filter = filter.hasAll("type", typeVal))
 
            $w("#FAQdataset").setFilter(filter)
                .then(count)
 
        } else {
            $w("#FAQdataset").setFilter(filter)
                .then(count)
        }
 
        $w("#Clearbutton").onClick(function () {
            $w("#TagCategory, #TagUser, #TagType").value = undefined;
            $w("#FAQdataset").setFilter(wixData.filter()).then(count);
        });
 
    }
 
    //COUNT ITEM
    function count() {
        let count = $w("#FAQdataset").getTotalCount();
        if (count > 0) {
            $w("#countText").text = `${count} items found`;
        } else { $w("#countText").text = `No item found`; }
 
        return count;
    }
 
    $w("#FAQdataset").onReady(function () {
        count();
    });
});

J.D · March 17, 2022, 7:45pm

Hi,
Please copy the code from light-mode (or use ‘Paste as plain’) + put it in a code block + only the part that’s needed (it’ll be more easy to read).

if you can add a screenshot/drawing of what you had in mind, it’ll make it may make the question clearer.

denniscelenlifepowr · March 18, 2022, 6:20am

I updated the question.

For a screenshot/ drawing, I have added the webpage link as an example.

J.D · March 19, 2022, 6:29pm

@denniscelenlifepowr I can see on your page, that you have 2 types of filters:

userType - where only one option is allowed and the filter should be .eq()
region - where multi-slection is allowed and the filter should be hasSome(). I don’t know why you have this filter twice.
Anyway, you should not let the user select both options in the userType filter.
What you should do there is something like:

$w('#userTypeSelectionTags').onChange(event => {
let value = event.target.value;
if(value.length){
value = value.reverse()[0];//here you keep only the value f the last selection.
event.target.value = [value];//here you update the selection tags value
}
//then run the filter with the value by calling the runFilter() function
})

The filter itself should be something like:

function runFilter(){
let filter = wixData.filter();
const userType = $w('#userTypeSelectionTags').value;
if(userType.length){
filter = filter.eq('userType', userType[0]);
})
const region = $w('#regionSelectionTags').value;
if(region.length){
filter = filter.hasSome('userType', region )
}
$w('#dataset').setFilter(filter);
}

And of course you can add a search input and use onInput to make a filter as well.

denniscelenlifepowr · March 21, 2022, 8:21am

@jonatandor35

Hi there

So to give more information. We would like the user to do the following.

Choose which type of user they are (indeed, this should be only one option)
They can choose a category to which the question is related.
Choose a topic, that is related to this category. (if possible, it would be nice that it’s not possible to select topics that are not available for that category.
Use a search bar.

I tried your code, but it gave an error. Declaration or statement expected.

J.D · March 21, 2022, 12:36pm

@denniscelenlifepowr Post your code

denniscelenlifepowr · March 21, 2022, 1:03pm

@jonatandor35

I added your code but, like i said, i have filters, and your code only has 2 of them.

I also do not get where you get the region code from. that was from the old code that I had copied and changed for our website.



import wixAnimations from 'wix-animations';
import wixData from 'wix-data';
const ACTIVE_COLOR = '#207272';

const DEFAULT_COLOR = '#001E1E';

//$w.onReady(function () {


//});



function initFAQrepeater() {
   $w('#FAQrepeater' ).forEachItem(( $item, itemData, index) => {

      $item('#FAQbutton').onClick(() => {
         openRelevantContent(index);


      });
   });

}

function openRelevantContent(targetIndex) {

   $w('#FAQrepeater').forEachItem(($item, itemData, index) => {
      const contentBox = $item('#FAQcontent');
     const button = $item('#FAQbutton');
     const arrow = $item('#FAQarrow');


      if (targetIndex === index) {

        contentBox.collapsed ? expandFAQcontent(contentBox, button, arrow) : collapseFAQcontent(contentBox, button, arrow);
      } else {
         collapseFAQcontent(contentBox, button, arrow);

      }

   });

}

function expandFAQcontent(contentBox, button, arrow) {
   contentBox.expand();
   button.style.color= ACTIVE_COLOR;
    
   wixAnimations.timeline()

      .add(arrow, { rotate: 270, duration: 300 })

      .play();
}

function collapseFAQcontent(contentBox, button, arrow) {
   contentBox.collapse();
   button.style.color= DEFAULT_COLOR;
   wixAnimations.timeline()

      .add(arrow, { rotate: 90, duration: 300 })

      .play();
}

/**
 * Adds an event handler that runs when the dataset is ready.
 */
export function FAQdataset_ready() {
   initFAQrepeater()
   // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
   // Add your code for this event here: 
}


$w('#TagUser').onChange(event => {
let value = event.target.value;
if(value.length){
value = value.reverse()[0];//here you keep only the value f the last selection.
event.target.value = [value];//here you update the selection tags value
}
//then run the filter with the value by calling the runFilter() function
})

function runFilter(){
let filter = wixData.filter();
const userType = $w('#TagUser').value;
if(userType.length){
filter = filter.eq('userType', userType[0]);
})
const category = $w('#TagCategory').value;
if(category.length){
filter = filter.hasSome('userType', category )
}
$w('#FAQdataset').setFilter(filter);
}

J.D · March 21, 2022, 2:29pm

@denniscelenlifepowr you need to put the onChange event handler in:

$w.onReady(function () {
//HERE
})

denniscelenlifepowr · March 21, 2022, 7:29pm

@jonatandor35

How does the code link the tags to the categories in the table?
I still does not work :s

import wixAnimations from 'wix-animations';
import wixData from 'wix-data';
const ACTIVE_COLOR = '#207272';

const DEFAULT_COLOR = '#001E1E';

//$w.onReady(function () {


//});



function initFAQrepeater() {
   $w('#FAQrepeater' ).forEachItem(( $item, itemData, index) => {

      $item('#FAQbutton').onClick(() => {
         openRelevantContent(index);


      });
   });

}

function openRelevantContent(targetIndex) {

   $w('#FAQrepeater').forEachItem(($item, itemData, index) => {
      const contentBox = $item('#FAQcontent');
     const button = $item('#FAQbutton');
     const arrow = $item('#FAQarrow');


      if (targetIndex === index) {

        contentBox.collapsed ? expandFAQcontent(contentBox, button, arrow) : collapseFAQcontent(contentBox, button, arrow);
      } else {
         collapseFAQcontent(contentBox, button, arrow);

      }

   });

}

function expandFAQcontent(contentBox, button, arrow) {
   contentBox.expand();
   button.style.color= ACTIVE_COLOR;
    
   wixAnimations.timeline()

      .add(arrow, { rotate: 270, duration: 300 })

      .play();
}

function collapseFAQcontent(contentBox, button, arrow) {
   contentBox.collapse();
   button.style.color= DEFAULT_COLOR;
   wixAnimations.timeline()

      .add(arrow, { rotate: 90, duration: 300 })

      .play();
}

/**
 * Adds an event handler that runs when the dataset is ready.
 */
export function FAQdataset_ready() {
   initFAQrepeater()
   // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
   // Add your code for this event here: 
}

$w.onReady(function () {
$w('#TagUser').onChange(event => {
let value = event.target.value;
if(value.length){
value = value.reverse()[0];//here you keep only the value f the last selection.
event.target.value = [value];//here you update the selection tags value
}
//then run the filter with the value by calling the runFilter() function
})

function runFilter(){
let filter = wixData.filter();
const userType = $w('#TagUser').value;
if(userType.length){
filter = filter.eq('userType', userType[0]);

const category = $w('#TagCategory').value;
if(category.length){
filter = filter.hasSome('userType', category )
}
$w('#FAQdataset').setFilter(filter);
}}})

J.D · March 22, 2022, 12:09am

@denniscelenlifepowr It is not, I thought you connected it via the editor UI.
If you wish to do it with code you can do it of course.

(btw, you can try instead of event . target . value = [ value ]; to use: $w('# $w ( ‘#TagUser’ ). value = [ value ];
)

denniscelenlifepowr · March 22, 2022, 9:39am

@jonatandor35

Can it be that there is a small type error in your code above. my code give a lot of errors right now.

$w.onReady(function () {
$w('#userTypeSelectionTags').onChange(event => {
let value = event.target.value;
if(value.length){
value = value.reverse()[0];//here you keep only the value f the last selection.
$w('#$w('#TagUser').value=[value];

)//here you update the selection tags value
}
//then run the filter with the value by calling the runFilter() function
})

function runFilter(){
let filter = wixData.filter();
const userType = $w('#userTypeSelectionTags').value;
if(userType.length){
filter = filter.eq('userType', userType[0]);
}
const region = $w('#regionSelectionTags').value;
if(region.length){
filter = filter.hasSome('userType', region )
}
$w('#FAQdataset').setFilter(filter);
}})

J.D · March 22, 2022, 10:00am

@denniscelenlifepowr yes, for some reason the $w got duplicated. It should be:

$w('#TagUser').value = [value];

Not:

$w('#$w('#TagUser').value=[value];

)

denniscelenlifepowr · March 22, 2022, 12:09pm

@jonatandor35

Ok, strangely It’s still not working, see the website link of the first post, it’s updated. The buttons stay gray, so it does not recognize the link, while it’s connected in the UI.
Also, #TagUser is not recognized. Should this be #userTypeSelectionTags

Sorry, I’m a newbie in this.

Dennis

J.D · March 22, 2022, 10:11pm

@denniscelenlifepowr

Delete line 83.
The property ID is set by you. You can either change it in the code or in the property panel. Just keep the same id in both places.

denniscelenlifepowr · March 23, 2022, 11:05am

@jonatandor35

I still got issues with property ID’s. In your code, you refer to the tags, and in my tags the values are the values from the columns in the database. But where do you mention the column “field key”? Is that also not necessary?

J.D · March 23, 2022, 1:01pm

@denniscelenlifepowr I don’t think I understand your question. Please elaborate.

denniscelenlifepowr · March 25, 2022, 9:48am

@jonatandor35

At this moment, the filter function does not work. The buttons are grey which means that there is no value in the table that connects to the type of user. So there is an issue with the ID’s. But In the code we refer indeed to the values, but how does the code know in which column of the table it needs to look? In editor X each column has an id - the “field key”.

J.D · March 26, 2022, 5:18pm

@denniscelenlifepowr I highlighted the field key

filter.eq('userType', userType[0]);
//..
filter = filter.hasSome('region', region )

Change it to your actual field keys.

J.D · March 26, 2022, 5:19pm

and if ‘region’ is not an array, use .eq() instead of .haSome()

denniscelenlifepowr · March 27, 2022, 7:11am

@jonatandor35

hi there.
If I test this code, still nothing happens. i can click the button, but there is no filter.

Dataset name: FAQdataset.

My tagbuttons id:
first one: #UserTags
second one: #catTags

fliedkeys:
first one: userType
second one: category

Ps. it’s not that you need to activate some event handles on the right side?

$w.onReady(function () {
$w('#UserTags').onChange(event => {
let value = event.target.value;
if(value.length){
value = value.reverse()[0];//here you keep only the value f the last selection.
$w('#UserTags').value = [value];

//here you update the selection tags value
}
//then run the filter with the value by calling the runFilter() function
})

function runFilter(){
let filter = wixData.filter();
const userType = $w('#UserTags').value;
if(userType.length){
filter = filter.eq('userType', userType[0]);
}
const cat = $w('#catTags').value;
if(cat.length){
filter = filter.hasSome('category', cat )
}
$w('#FAQdataset').setFilter(filter);
}})

Topic		Replies	Views
Let users filter data in a table Show and tell code , tips	133	21234	May 19, 2020
Gallery + 2 drop-down filters Ask the community code , question	24	740	February 10, 2019
New Feature: Selection Tags Be in the know code , news	104	10424	March 10, 2021
Filter by multiple user inputs and cross pages Ask the community code , question	21	637	February 26, 2019
User Input Drop-Down Sort Ask the community code , question	47	3128	July 4, 2018

Filter and hide text for FAQ

Related topics