Here is an example:
Thank you Matanya. That was helpful indeed.
That was very helpful.
How do you adjust that code if you want only one able to be expanded at a time? (Expanding a second one collapses the previously opened one.)
Just in case it is helpful, the code* that @md60th wrote for us is copied here. Sorry @wcavataio that I do not know how to do what you asked.
$w.onReady(function () {
$w('#repeater1').forEachItem(( $item ) => {
$item('#trigger').onClick(() => {
if ($item('#contentContainer').collapsed)
$item('#contentContainer').expand();
else
$item('#contentContainer').collapse();
})
})
});
*If you use this code, make sure to rename the IDs of:
-
The button that acts as your trigger to be ‘trigger’
-
The box (or second row of the grid as created in the video) to be ‘contentContainer.’
Repeater will probably be ‘repeater1’ by default, but if not, you need to change that too otherwise this code won’t work.
Following up on my previous answer with a new bit of info:
If you are using this code with a dataset (which you probably are because that’s the point of repeaters), you need to use onItemReady instead of forEachItem.
onItemReady is for anything involving dynamic data.
forEachItem is just for native repeaters (no datasets, no code).
Hope this helps!
Thank you @benpanico6 and @md60th !
Do either of you know what code I would use if I want to create an accordion with a grid I set up myself on the site? Instead of using a repeater (since it doesn’t give the option to customize the background for each item).
Not well-versed in code but you should be able to use the same flow for a container (or any element) inside a grid. The principle of having the content be collapsed should still work.
Hi @dapdesignart ,
Yeah, @Rob is right that the principle is the same, and using the technique he shows in the video, you will be able to customize each section’s background as you want.
In terms of the specific code you use, you just take out the first line of code. Using a repeater makes it possible to write out this code once and then “for each item” in the repeater, the code does the same thing. If you are not using a repeater, you will just need to write the same code each time with each section of your grid:
$w.onReady(function () {
$item('#trigger1').onClick(() => {
if ($item('#contentContainer1').collapsed)
$item('#contentContainer1').expand();
else
$item('#contentContainer1').collapse();
})
$item('#trigger2').onClick(() => {
if ($item('#contentContainer2').collapsed)
$item('#contentContainer2').expand();
else
$item('#contentContainer2').collapse();
})
});
Etc. Hope that helps!
Would it be possible to have an accordion displayed in a horizontal format? I was trying to put something together but it kept on getting errors with the text/containers/repeaters when - i was building it.
@hello95674 what kind of errors was it, could you share some kind of example? As I can see from the previous examples in the thread, it was horizontal 
I made a mistake and meant to say vertical — woops sorry — In Horizontal it works.
In Vertical format, when the text gets rotated within the columns, it was breaking/not working for me. The containers that were built inside the grid were breaking and moving from the positions they were supposed to have.
At the end we changed the format on the accordion to a different layout because it was not coming out the way we envisioned it.
I was able to get it working but because the text needs to be rotated to be vertical, you’d have to remember that you have to width. I used the same method as above but changed the grid measurement.
export function button1_click(event) {
if( $w("#box11").collapsed ) {
$w("#box11").expand();
}
else {
$w("#box11").collapse();
}
}
where is the example?