# \<Toggle\> Feature

**URL:** <https://forums.fusetools.com/t/toggle-feature/6494>\
**Category:** Feature Suggestions\
**Created:** [March 23, 2016, 5:12pm UTC](https://forums.fusetools.com/t/toggle-feature/6494 "2016-03-23T17:12:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [March 23, 2016, 5:12pm UTC](https://forums.fusetools.com/t/toggle-feature/6494/1 "2016-03-23T17:12:34Z")

</div>

It would be really awesome to be able to use `<Toggle>` to toggle between multiple values like so:

```auto
<Panel ux:Name="panel></Panel>
<Button>
 <Clicked>
   <Toggle Target="panel.Visibility" Values="Visible,Hidden" />
 </Clicked>
</Button>

```

Where the `Values` are comma seperated, and Toggle will just keep on toggling between each value (left to right)

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [March 29, 2016, 10:54am UTC](https://forums.fusetools.com/t/toggle-feature/6494/2 "2016-03-29T10:54:52Z")

</div>

This type of behaviour is generally accomplished using `While...` triggers. In this case you might want something like this instead:

```auto
<Panel ux:Name="panel" Visibility="Hidden">
   <WhileBool ux:Name="Revealed">
       <Change panel.Visibility="Visible"/>
   </WhileBool>
</Panel>

<Button>
   <Clicked>
        <Toggle Target="Revealed"/>
   </Clicked>
</Button>

```

This approach is built around a state model rather than an imperative model. Typically the `While...` trigger may do several things as well, and this groups them together. It also creates a logical group of changes, and is state stable (you won’t accidentally get into an irreversible or inconsistent state when using change and transfrom animators).

If you have more than two states to toggle you can use the `StateGroup`.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [March 29, 2016, 11:01am UTC](https://forums.fusetools.com/t/toggle-feature/6494/3 "2016-03-29T11:01:53Z")

</div>

Yea that’s the way I do it now, but if you want multiple things to toggle through then how would you use `StateGroup` could you show me an example?

This feature would allow for a whole bunch of things, changing text of a button, colors etc.

How is this done with `StateGroup` and it still might be useful to have this because less code, all I have to do is add a comma and value to the `Values` property of `Trigger`

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [March 29, 2016, 11:17am UTC](https://forums.fusetools.com/t/toggle-feature/6494/4 "2016-03-29T11:17:25Z")

</div>

A stategroup has this basic form:

```auto
<StateGroup ux:Name="TheGroup">
    <State ux:Name="StateA">
        <Change .../>
    </State>
    <State ux:Name="StateB">
        <Change .../>
    </State>
     ...

```

To switch the state use `<Set TheGroup.Active="StateB"/>`.

If you have a use-case where your syntax would be shorter, and still clear, then please post it. It’d give me a better idea of how to consider a potential new feature. By use-case I mean a full scenario where it would be used, so I get a full picture of how it would work.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [March 29, 2016, 11:22am UTC](https://forums.fusetools.com/t/toggle-feature/6494/5 "2016-03-29T11:22:08Z")

</div>

It’s still possible with StateGroup etc, but here’s a usecase:

```auto
<Panel ux:Name="panel"></Panel>
<Button Text="Change Color">
  <Clicked>
    <Toggle Target="panel.Background" Values="#fff,#000,#f00,#0f0,#00f" />
  </Clicked>
</Button>

```

With `StateGroup` to switch between each color, I’d somehow have to keep track of which color is set, and then switch to the next state

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [March 29, 2016, 11:33am UTC](https://forums.fusetools.com/t/toggle-feature/6494/6 "2016-03-29T11:33:25Z")

</div>

You can use `<TransitionState Target="TheState" Type="Next"/>` to move to the next state in a state group.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [March 29, 2016, 11:37am UTC](https://forums.fusetools.com/t/toggle-feature/6494/7 "2016-03-29T11:37:17Z")

</div>

Still much more code, because for each color you’ll need a `<State>` and `<Change>`, and still need the `<StateGroup`. One could always use an `<Each>` to make a `<State>` for each color, but again its more work for simple values. Its still obviously very useful for complex things, because you may have animation and all sorts of things, but having `<Toggle Target="..." Value="..." />` is much simpler.

**To all people viewing this, if you agree with this feature please say something, this is how the Fuse team knows whether is worth implementing. (I’m just one person) Thanks**

---

<div class="post-metadata">

**Author:** ![Kwame](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@Kwame](https://forums.fusetools.com/u/Kwame)\
**Post date:** [October 26, 2017, 3:17am UTC](https://forums.fusetools.com/t/toggle-feature/6494/8 "2017-10-26T03:17:06Z")

</div>

Here, here, this would be nice to have…