5

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

Christian Felix
  • 644
  • 1
  • 9
  • 28
  • Remove the bind expression `[class]="show||hide"`. Also do you need it to be visible at start or not visible at start? – Chris Aby Antony Sep 04 '18 at 12:39
  • 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? – Christian Felix Sep 04 '18 at 12:45
  • 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. – Chris Aby Antony Sep 04 '18 at 12:53
  • 1
    @ChristianFelix https://stackoverflow.com/a/45242350/5635098 hope this help you. – Bachcha Singh Sep 04 '18 at 12:58
  • @bachcha-singh, thank you, it works! – Christian Felix Sep 04 '18 at 13:06
  • @ChristianFelix you can achieve your goal without using amp-bind also, check my answer – Bachcha Singh Sep 04 '18 at 13:48

3 Answers3

11

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>
Bachcha Singh
  • 3,850
  • 3
  • 24
  • 38
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

Felipe Lima
  • 443
  • 1
  • 10
  • 19
1

This looks the cleanest for me.


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

<div [hidden]="openMenu">some content</div>
DedaDev
  • 4,441
  • 2
  • 21
  • 28