# How do I create dynamic on/off toggles for my map?

[Controls](https://docs.kumu.io/guides/controls) are incredibly useful to reduce the complexity of your map and make your visualization more dynamic. Through buttons, drop downs, and/or toggles, viewers can decide what entities they want to see on the map and when. They're also great for simple show/hide toggles that can be turned `on` or `off` at any moment. Here's how you can add them to your map:

### Toggle elements 

Before copying the code, make note of the following customizations in the properties based on what you want to do: 

* **Top** - the region of the control on your map. Switch for "bottom" or "bottom-right" to place the control somewhere else.
* **Target** -  allows you to indicate which elements you want the toggle control to apply to, through the use of [selectors](https://docs.kumu.io/guides/selectors).
* **As** - dictates what your control will look like. Replace "label" with "button" to turn the control into a button.
* **Default** - indicates whether you want the elements or connections to show ("true") or hide ("false") by default when opening the map. 
* **Label** - allows you to set the text that will show on the map and entice people to click the toggle. Make sure to use "Show" when `default: false;` and "Hide" when `default: true;` . 

Now, on to the real deal!

**To show or hide certain elements with the click of button, add this code to your advanced editor:** 

```
@controls {
 top {
 filter {
  target: element["element type"="Person"];
  as: label;

  option {
    selector: *;
    default: true;
    label: "Hide all people";
   }
  }
 }
}
```

In this example, we can see from the `target:` property  that we want the control to hide all elements that have "Person" as their "Element type", which is why the `label:` of the control is "Hide all people". You can switch out the target for any other field ("element type") and field value ("Person"). 

{% hint style="info" %}
Though possible, there's few instances where we want to use the `target: element;` selector, because that would hide all elements, thus all connections; effectively hiding your entire map. 
{% endhint %}

**To show or hide elements without connections (so-called orphans), use this code:**

```
@controls {
 top {
 filter {
  target: :orphan;
  as: label;

  option {
    selector: *;
    default: true;
    label: "Hide elements without connections";
   }
  }
 }
}
```

For more info on hiding orphans, [visit this guide](/frequently-asked-questions/how-do-i-hide-elements-without-connections.md). 

### Toggle connections

**To toggle *****all***** connections with the simple click of a button, use this code:** 

```
@controls {
  top {
    filter {
      target: connection;
      as: label;

      option {
        selector: *;
        default: true;
        label: "Hide connections";
      }
    }
  }
}
```

Note again how the `target: connection;` line indicates what entities you want Kumu to apply this control to. Just like with elements, use more specific [selectors ](https://docs.kumu.io/guides/selectors)to apply the toggle control to certain connections only.  

If you have any questions about writing these codes, don't hesitate to reach out to <support@kumu.io>!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kumu.io/frequently-asked-questions/how-do-i-create-dynamic-on-off-toggles-for-my-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.