DIY Accordion for a repeater connected to CMS

Ask the community
, , ,
1

Question:

How can I have accordion-like functionality connected to a CMS dataset?

Since it is impossible to connect a CMS to the included accordion feature, I am trying to create my own accordion within a standard repeater that is connected to a dataset.

So far each repeater cell has 2 containers, the first one has the accordion title and a button, then the second has the content.
The 2nd container is defaulted to collapsed and then is toggled between expand and collapse with a button using an onClick() function.

My problem begins when the 2nd container is collapsed. There is a huge chunk of empty space between each descending repeater cell. The empty space seems to equal to the height of the content inside the 2nd container that is collapsed. It looks fine when it is expanded.

Is there any way that I can make this more like a normal accordion in that when every tab is collapsed, the titles have less space between them?

BrokenRepeater
BrokenRepeater1378Ă—869 28.6 KB

Thank you!!!

Product:
Wix Studio

2

I don’t know, but I’m interested as well. I also put a feature request in the product roadmap for exactly this, but it hasn’t shown up yet.

3

Hey @user1433 -

I don’t know if this is the problem (please provide your code and screenshots of your settings for better troubleshooting), but the new setting in Studio is called “Hug height” and it is under “Responsive Behavior.” This should be how to make sure those sections disappear automatically.

If it is an issue with the code, make sure you are collapsing the largest parent element. In case it helps anyone, the code I have used, which expands an accordion section and closes it is this:

$w('#repeater1').onItemReady(( $item ) => {
		$item('#button1').onClick(() => {
			if ($item('#contentContainer').collapsed)
				$item('#contentContainer').expand();
			else
				$item('#contentContainer').collapse();
		})
	});

This code closes the section with a second press of the button. It does not close all other accordion sections. It sounds like you figured that part out though and it’s a formatting issue.

4

Thanks for the reply!
I have seen hug height on a few items elsewhere, but none of the boxes in my repeater have the option in their responsive behavior dropdown menus.

And yes, the code is working great, its just the formatting is messed up.

5

Using wix studio has increased my development time probably by 2x. Not touching this software for at least a few year until they make it useable lol.

6

Yeah, I’m thinking about moving to Webflow. There’s just so much missing in Wix Studio still. And they don’t seem like they’re putting much effort into changing it.

1 Like
7

@user1433 -

Do you want to provide a photo of your formatting settings? Are you sure you’re working with the correct element? The nesting elements mess me up a lot LOL.

8

This is a simplified version of my original post, just to try and get the simplest version working.

So right now, in the repeater layers, the white container is defaulted to collapsed. I want the height of the blue “item” to shrink to just the height of the “start now” button like an accordion would.

If I can get that working I will use similar code to what you posted before to make it function on click of the button.

In my original post, I had two containers inside the repeater item, one was the title/expand button that remained static, and the other was the collapsing accordion content. The main problem lies in getting the height of the repeater item to change.

Screenshot 2024-02-08 141031
Screenshot 2024-02-08 1410311898Ă—967 131 KB

9

I think its impossible

10

You can build your own repeater inside of an HTML-Component or a CUSTOM-ELEMENT.

11

Can i connect it to the CMS?

12

Yes it would be possible.

13

Hi @user1433 –

Sorry I didn’t respond sooner. Did you get this figured out?

When I did my accordion, I used the grid functionality in the repeater (2 rows x 1 column) and then each part of the grid had a container in it expanded to full size. That way, when you go to collapse the container, it collapses that entire row of the grid. That should solve the issue of needing to mess with the formatting of the repeater itself.

Ben

14

I’ve been searching for a solution to connect a Wix CMS to the Wix FAQ app for quite some time. At current, I don’t think it is possible.

Recently, I discovered a workaround involving building an FAQ from scratch using a repeater and code. I found the following tutorial on YouTube that demonstrated this visually. All was good until I hit the 5 minute and 40 second mark. It was in a crucial area of the coding needed to complete the project. That’s not good for a guy like me who is “code” clueless. Thankfully, I eventually achieved my goal (after several more hours of research). Here’s the video link:

I also came across another YouTube video by @codequeen earlier this afternoon covering the same subject. It’s longer and that’s ok. Had I viewed her tutorial first, I would have finished my project in half the time it took me. @codequeen walks you and talks you through the entire process. She gets an A+ from me. Take a look for yourself.

@codequeen, you got a like and a subcriber, me. Thanks

1 Like
15

Just an ordinary REPEATER.

16

Yes, but on steriods.

1 Like
17

This is not Wix FAQ app. People will think it is possible to manipulate FAQ app and it is in fact not.

It must be coded.

A simplified method with explanation can be found in this original tutorial from 2018 ….

1 Like
18

Thanks for your comment, I edited my post based on your comment.

Cheers,
imtonydillard

1 Like
19

I saw! — Totally made me blush!!! :smiling_face_with_three_hearts: :heart_eyes: :star_struck:

1 Like