amp-htmlaccelerated-mobile-page

how to hide dynamically an div container in AMP Page


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


Solution

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