# Changing accordion click action from "+" sign to a "-" when active **URL:** \ **Category:** Technical Questions\ **Created:** [February 2, 2021, 8:33pm UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444 "2021-02-02T20:33:02Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [February 2, 2021, 8:33pm UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/1 "2021-02-02T20:33:02Z")
This guide will go over how to change your accordions “+” sign to a “-” sign when the accordion item is active. 1. 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”) 1. 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. ![Feb-02-2021 15-07-29](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/1404d32cd594128cd5a98817e86e91c75efa715e.gif) 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). ---
**Author:** ![sjoys](https://avatars.discourse-cdn.com/v4/letter/s/ecae2f/32.png) [@sjoys](https://forum.builder.io/u/sjoys)\ **Post date:** [April 15, 2021, 2:18am UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/2 "2021-04-15T02:18:44Z")
> [@maddy](#): > > state.itemOne = !state.itemOne 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? ---
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [April 15, 2021, 1:39pm UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/3 "2021-04-15T13:39:31Z")
Hi @sjoys! 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: `.builder-accordion-detail.builder-accordion-detail-open {max-height: none !important;}` ---
**Author:** ![ItaySviri](https://avatars.discourse-cdn.com/v4/letter/i/ba9def/32.png) [@ItaySviri](https://forum.builder.io/u/ItaySviri)\ **Post date:** [August 17, 2021, 9:33am UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/4 "2021-08-17T09:33:55Z")
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 ---
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [August 17, 2021, 3:43pm UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/5 "2021-08-17T15:43:10Z")
Hi @ItaySviri, Can you send me the link to the Builder page you’re adding this on? I’d be happy to take a look! ---
**Author:** ![ItaySviri](https://avatars.discourse-cdn.com/v4/letter/i/ba9def/32.png) [@ItaySviri](https://forum.builder.io/u/ItaySviri)\ **Post date:** [August 22, 2021, 10:22am UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/6 "2021-08-22T10:22:18Z")
Hello @maddy I ended up using a template for this matter. Thanks! 🙂 ---
**Author:** ![jackmielke](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@jackmielke](https://forum.builder.io/u/jackmielke)\ **Post date:** [July 14, 2022, 8:52pm UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/7 "2022-07-14T20:52:16Z")
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! 😄 ![Screen Shot 2022-07-14 at 1.09.06 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/755c8178825274db7867e437441780f523460f78.jpeg) ---
**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\ **Post date:** [July 15, 2022, 12:12am UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/8 "2022-07-15T00:12:56Z")
HI @jackmielke, can you share the builder content link for this page so I can take a look? ---
**Author:** ![jackmielke](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@jackmielke](https://forum.builder.io/u/jackmielke)\ **Post date:** [July 15, 2022, 2:11am UTC](https://forum.builder.io/t/changing-accordion-click-action-from-sign-to-a-when-active/444/9 "2022-07-15T02:11:46Z")
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!!