how to hide dynamically an div container in AMP Page

Question

Are there some solution as how to hide an div container dynamically?

this is my current implementation:

<button class="button" on="tap:player.hide">hide me</button>
<button class=button" on="tap:player.show">show me</button>    
<div id="player" class="show" [class]="show||hide">some content</div>

.hide {
  display: none;
}

.show {
  display: block;
}

which works as long the div class has the value 'show' in initial call. But what i want is to disable the container-view as long the buttons hasn't been clicked...

Answer 1

Answered by Sebastian Benz with amp-bind : Click Here

You can achieve your goal without amp-bind also

Here is working url

Code

<button id="playerbutton1" class="button" hidden on="tap:player.hide,playerbutton1.hide,playerbutton2.show">hide me</button>
<button id="playerbutton2" class="button" on="tap:player.show,playerbutton2.hide,playerbutton1.show">show me</button>    
<div id="player" hidden>some content</div>

Answer 2

Or with Actions and Events: link

<button on="tap:player.toggleVisibility">Toggle</button>

<div id="player" hidden>some content</div>

Working example

AMP hint: CSS hide/show and visibility do not work with tap event

Answer 3

This looks the cleanest for me.

<button on="tap:AMP.setState({openMenu: !openMenu})">Toggle</button>

<div [hidden]="openMenu">some content</div>