Filter and hide text for FAQ

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();
    });
});

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.

I updated the question.

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

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

  1. userType - where only one option is allowed and the filter should be .eq()

  2. 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.

@jonatandor35

Hi there

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

  1. Choose which type of user they are (indeed, this should be only one option)

  2. They can choose a category to which the question is related.

  3. 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.

  4. Use a search bar.

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

@denniscelenlifepowr Post your code

@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);
}


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

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

@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);
}}})

@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 ];
)

@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);
}})

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

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

Not:

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

)

@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

@denniscelenlifepowr

  1. Delete line 83.
  2. 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.

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

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

@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”.

@denniscelenlifepowr I highlighted the field key

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

Change it to your actual field keys.

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

@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);
}})