This guide will go over how to change your accordions “+” sign to a “-” sign when the accordion item is active.
Select the “accordion item title” layer and navigate to the data tab. Scroll down to the “Element actions” section and select “+ new action”. Now, select “click” as the event and paste this for the action:
state.itemOne = !state.itemOne (this can be named anything and doesn’t need to be called “itemOne”)
Now, select the plus sign text and select “+ new binding” in the element data bindings section. Select “text” as the property and paste this for the binding:
state.itemOne ? '-' : '+'
Now, a + sign will display when the accordion is not active and a - sign will display when the accordion item is active.
Note: You can repeat these steps for every accordion item, but the state will need to be changed for each (e.g. itemOne, itemTwo, itemThree, and so on for each accordion item).
Hi, I think I might be missing a step in the instructions here. When I follow these instructions something strange happens. When I click on “text” as the property under the Binding my title text disappears. Then, when I paste in the code my title changes to “true” and " " when I open and close the accordion. Thoughts?
Okay, more details. the above is what happens when I select the Text field inside “Accordion item title”. If I actually select “accordion item title” though, under the Binding section the only options are “hide if”, “show if”, “link url”, “background color”… no “text” as an option to select.
In particularly long sections my text is over-running the available area and overlapping the sections below. Thoughts on how to address this as well?
Sorry for any confusion, I will make some edits to this guide to clarify! Before you add any bindings, you need to add another text block inside of the accordion item title layer for the +/ - sign. Once you’ve added this, you can add the state.itemOne ? '-' : '+' binding to this new text box. This will be the only layer that requires a binding. I went ahead and added this to the first item in your accordion as an example.
To resolve the overflow you’re seeing in the accordion, you can add this CSS to the content JS + CSS section in the data tab:
HI @maddy ,
I have the same issue as @sjoys mentioned above.
I did the exact same instruction as you wrote above, but I still receive “true”. or " " when closed/open.
I also added the CSS content to the section you wrote, but it didn’t change anything.
I’m working with builder app on a Shopify site.
Also, I’d like to know if I use different strings in this condition
Hi! So I’ve got a similar question, but with images instead of text. I’ve been able to change text based on toggle states and conditional values set as “[text]” and “[other text]”, but when I’ve tried setting the same type of conditional values for an image, I haven’t had luck. It seems like I’ve tried every single text format for uploading images (file name, url, etc.) into these conditions but still haven’t had luck.
Any thoughts? i haven’t been able to find answers anywhere, so an answer here would be much appreciated!
Hey Sarah - I actually figured it out by importing an “accordion with arrow” template from builder instead, so I think I’ll just use that strategy instead. Thanks though!!
