DIY Accordion for a repeater connected to CMS

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?

Thank you!!!

Product:
Wix Studio

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.

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.

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.

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.

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

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

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.

I think its impossible

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

Can i connect it to the CMS?

Yes it would be possible.

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