# How do you use the same state object for multiple elements?

**URL:** <https://forum.builder.io/t/how-do-you-use-the-same-state-object-for-multiple-elements/40>\
**Category:** CMS\
**Tags:** state-and-actions\
**Created:** [April 6, 2020, 7:12pm UTC](https://forum.builder.io/t/how-do-you-use-the-same-state-object-for-multiple-elements/40 "2020-04-06T19:12:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![john](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/john/32/20_2.png) [@john](https://forum.builder.io/u/john)\
**Post date:** [April 6, 2020, 7:12pm UTC](https://forum.builder.io/t/how-do-you-use-the-same-state-object-for-multiple-elements/40/1 "2020-04-06T19:12:07Z")

</div>

I am trying to create “hide” and “show” buttons for multiple elements on the same page (that work independently from one another).

After following the “state and actions” tutorial ([link](https://www.builder.io/c/docs/guides/state-and-actions)), all elements on the page appear and disappear when any of the buttons are pressed.

Do I need to create a different state object for each piece of content on my page? Or, is there a way to create a single state object and then limit its scope?

---

<div class="post-metadata">

**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 6, 2020, 8:24pm UTC](https://forum.builder.io/t/how-do-you-use-the-same-state-object-for-multiple-elements/40/2 "2020-04-06T20:24:52Z")

</div>

Hi, John! Thanks for the question.

If you are using state and actions for multiple “show and hide” buttons that affect different elements on your page, the state will need to have its own unique key for each element.

Here is an example:

Let’s say we want to be able to hide and show these two photos independently.

 ![Screen Shot 2020-04-06 at 4.01.51 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/59dd9c809647feb0383c60b6a1da0cdfab625b9d.jpeg)

1. We need to give each button an on click action (Navigate to the Element actions section located in the Data tab). For the first set of buttons, we can give the “hide” button `state.imageOneHidden = true` and the “show” button `state.imageOneHidden = false`.

2. For the second set of buttons, we can repeat the step we did for the first set, but we need to give the state a different unique key. Lets give the “hide” button `state.imageTwoHidden = true` and the “show” button `state.imageTwoHidden = false`.

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/f553de584c1a5a888ffc11cc73bcf37c48f8a08c.gif)

1. Now, we can see hidden being toggled on and off separately for each set of buttons.

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/8ef146557d426f49610d75e2aa56f59f369aa82b.gif)

1. Now, you can bind the hidden property to your content. For the top image, we will get `hide` from `state.imageOneHidden`. For image two, we will get `hide` from `state.imageTwoHidden`.

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/aa61650d07c77fc347bc66df52edf6e5740fec22.gif)

Here is the end result:

![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/2a14cb6cc06faa2938f468196d7e6dd58d76f07c.gif)

I hope this was helpful! If you have any questions let us know!

---

<div class="post-metadata">

**Author:** ![john](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/john/32/20_2.png) [@john](https://forum.builder.io/u/john)\
**Post date:** [April 6, 2020, 8:37pm UTC](https://forum.builder.io/t/how-do-you-use-the-same-state-object-for-multiple-elements/40/3 "2020-04-06T20:37:23Z")

</div>

This makes sense – thanks so much!