Search code examples
amp-html

How can I hide the opened dropdown in AMP

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?

Solution

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