How can I hide the opened dropdown in AMP

Question

I'm playing around with this navbar example https://www.ampstart.com/render/navbar-with-sidebar.amp#amp=1

Is it possible to close the opened dropdown if I click on the other?

Answer 1

The following solution, to toggle the opened dropdown/accordion with amp-bind, works very well for me:

On the first drowdowm/accordion:

<section [data-expand]="expandAc1" on="expand:AMP.setState({expandAc2: false, expandAc1: true})">

And on the other drowdowm/accordion:

<section [data-expand]="expandAc2" on="expand:AMP.setState({expandAc1: false, expandAc2: true})">

Sources: https://github.com/edelight/amphtml/commit/c8197475a55f8ff15e87fb0969238ec76cf1d71c AMP: easy way to toggle a CSS class?