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...

Hawkinson

Remove the bind expression [class]="show||hide". Also do you need it to be visible at start or not visible at start? – Graubert

as long the div is set to visbile it works as expected, only when its view is disabled at start, then no content will appear after the show button gets clicked...i got an message within my developer tool which indicated to disable the div dynamically in order to works.....the question how to do it? – Hawkinson

Did you try deleting class="show" [class]="show||hide" this part? It is not really needed if you are using player.hide and player.show functions. – Graubert

@ChristianFelix https://mcmap.net/q/715887/-amp-easy-way-to-toggle-a-css-class hope this help you. – Chondrule

@bachcha-singh, thank you, it works! – Hawkinson

@ChristianFelix you can achieve your goal without using amp-bind also, check my answer – Chondrule

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>

Chondrule

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

Decelerate

Answer 3

This looks the cleanest for me.

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

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

Watson