Non techy here, need help with show/hide text for FAQ

Ask the community
,
1

Hello, this is my first time creating a website and I haven’t had any previous experience with code. I am creating an FAQ subpage and I’d like people to be able to see the question and click an arrow and allow the answer/information to drop down once you click the arrow. I cannot for the life of me figure it out and I am getting so frustrated with it! Also, I have a service section where you can book services and I would like a small image icon for the services offered. Once you click on each individual service it takes you to another page that describes the service in further detail and it enlarges the small icon on the list of services and it looks awful. I’d either like to not have an image for the service description page or have it smaller but it’s a set template so I cannot change the image size or have the option of opting out of an image on the service description page. Anyways, if anyone could help me out I would greatly appreciate it.

2

This tutorial will hopefully help you

https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link-with-code#code-for-the-show-moreshow-less-toggle-button-1

3

Thank you so much for responding but I tried to do what it said but I cannot figure it out :frowning:

I am currently in the website editor where I can edit the site myself and I just turned on the developer tools. I went to the page where I needed this function and clicked on the first question. I then went to the bottom on the page and clicked on my FAQ Code page and copied what it suggested and pasted but have no clue where to go from there.

4

Is this what you are trying to do?

https://www.fishonbassanglers.com/faq

I was able to do this by putting all the questions and answers into a database collection.

Then on the FAQ page, added a repeater that is connected to my database collection. Since I am using a repeater, you don’t need to do this code for each question button you have. The only code you need is similar to this:

export function Questionbutton_click(event)
{
//Add your code for this event here:
let clickedItemData = $w(“#FAQdataset”).getCurrentItem();

$w("#repeater1").onItemReady( ($w, itemData, index) => 
{

if (event.context.itemId===itemData[‘_id’])
{
if ($w(‘#Answertext’).collapsed)
{
// expand what you want here.
$w(‘#Answertext’).expand();
}
else
{
//collapse what you want here
$w(‘#Answertext’).collapse();
}
}
}
)}

5

Here is an example of what I would like to do, https://www.browsbyalexis.ca/faq-s

Again, I would not know the first thing about code, even what you suggested above boggles my mind

6

I suppose this is why people pay other people to create their websites haha

7

I would start by following this video to get the collection started:

and then move on to these for the repeater:

8

@joannapjohnson85 I know it seems intimidating but the videos make it a lot easier to understand. I only started this site about 3 weeks ago and I understand 1000% more than I did when I started

9

@poolshark314 Thank you so much, I will check out the videos and see if it helps me out! I really appreciate it, thank you!!