2

I'm trying to change the state of two buttons. But if I press one button both dissapear. Button 1 should switch to Button 2 (and vice versa) and Button 3 to Button 4 (and vice versa) but if I press one button the other dissapears

    <section>
        <button 
        class="button1 show" 
        [class]="button1 ? 'button1 show' : 'button1 hide'" 
        on="tap:AMP.setState({button1: visible, button2: !visible})">
        <span class="">Button 1</span>
        </button>

        <button 
        class="button2 hide" 
        [class]="button2 ? 'button2 show' : 'button2 hide'" 
        on="tap:AMP.setState({button1: !visible , button2: visible})">
        <span class="">Button 2</span>
        </button>
</section>



<section>
        <button 
        class="button3 show2" 
        [class]="button3 ? 'button3 show2' : 'button3 hide2'" 
        on="tap:AMP.setState({button3: visible, button4: !visible})">
        <span class="">Button 3</span>
        </button>

        <button 
        class="button4 hide2" 
        [class]="button4 ? 'button4 show2' : 'button4 hide2'" 
        on="tap:AMP.setState({button3: !visible , button4: visible})">
        <span class="">Button 4</span>
        </button>
</section>
Bachcha Singh
  • 3,850
  • 3
  • 24
  • 38
user3674177
  • 58
  • 6
  • Have a look at this JSBin showing 3 ways of achieving the above https://jsbin.com/konadulufu/edit?html,output – sanjsanj Jun 02 '18 at 11:58
  • You can also add `#development=1` to the end of your URL to enter debug mode and enter `AMP.printState()` in your browser console to see what's actually in your state. – sanjsanj Jun 02 '18 at 12:53

0 Answers0