Show and hide imges on tap button in AMP - html

Question

Is possible to show one image and hide multiple images on button tap i AMP?
For exaplme, I have a 4 buttons (button1, button2, button3 and button4) and have 4 images (img1, img2, img3, img4). And I would like to do something like that, hit button1 and show img1, hit button2 show img2 but hide img1 and etc.
In simple way hit button to show image and hide image witch is currently on screen.
I tried to do it, but im stuck on something like this. But it won't works correctly.
<button class="button1" on="tap:img1.toggleVisibility">BUTTON1</button>
<button class="button2" on="tap:img2.toggleVisibility">BUTTON2</button>
<button class="button3" on="tap:img3.toggleVisibility">BUTTON3</button>
<button class="button4" on="tap:img4.toggleVisibility">BUTTON4</button>
<div>
<div id="img1" style=" position: absolute" hidden >
<amp-img src="img1.jpg" width="600" height="600"> </amp-img>
</div>
<div id="img2" style=" position: absolute" hidden >
<amp-img src="img2.jpg" width="600" height="600"> </amp-img>
</div>
<div id="img3" style=" position: absolute" hidden >
<amp-img src="img3.jpg" width="600" height="600"> </amp-img>
</div>
<div id="img4" style=" position: absolute" hidden >
<amp-img src="img4.jpg" width="600" height="600"> </amp-img>
</div>
</div>
I've tired with on="tap:AMP.setState({ hide: true })" and on="tap:AMP.setState({ hide: false })" but it works only for two images.

Answer 1

For a long time the question was unanswered, I will try to help and I hope the question is still relevant.
If I understand correctly, you want to display only image related to button id clicked at once. For simplicity of the example, I will not use images directly. Instead, we use multi-colored div's. The solution is binding hidden property to exact Id. Feel free to play with below enhanced code and css, and images if you like:
.container{
display: flex;
margin-left: 100px;
}
.box{
width: 30px;
height: 30px;
margin: 25px;
padding: 5px;
color: azure;
font-weight: 900;
}
.img1{
background: red;
}
.img2{
background: green;
}
.img3{
background: blue;
}
.img4{
background: yellow;
}
<button class="button1" on="tap:AMP.setState({id:1})">BUTTON1</button>
<button class="button2" on="tap:AMP.setState({id:2})">BUTTON2</button>
<button class="button3" on="tap:AMP.setState({id:3})">BUTTON3</button>
<button class="button4" on="tap:AMP.setState({id:4})">BUTTON4</button>
<div class="container">
<div id="img 1" class="img1 box" hidden [hidden] = "id == 1 ? false : true" >
img1
</div>
<div id="img 2" class="img2 box" hidden [hidden] = "id == 2 ? false : true" >
img2
</div>
<div id="img 3" class="img3 box" hidden [hidden] = "id == 3 ? false : true">
img3
</div>
<div id="img 4" class="img4 box" hidden [hidden] = "id == 4 ? false : true">
img4
</div>
</div>
Warm Regards,
V.