Feature request: Expando

[rudygalfi]

A way to click/tap on a button and expose some content that's hidden from view by default. Also, can this trigger an async request to fetch the content that would be populated, including sizing information?

[maxhartshorn]

+1 This would be a great feature to have. I've seen this on HuffPo, QZ, NYT, and we're currently implementing it on our site. Typically there are related links served below a "Read More" button. Giving users who are on the fence about reading an article a chance to "bail" into related content seems to be a good way to drive recirculation on mobile.

[ds0001]

👍 This would be great to have parity with our current NYT mobile web implementation.

[Nemo64]

One thing to consider is that this might also allow for pulldown/drawer menus as they are common in the mobile web.

What I would also wish for is the capability to toggle 2 elements at the same time to switch between 2 content areas.... like before/after images.

It might also be needed to jump to the expanded element after the toggle is activated.

Another thing this element might need to cover is an accordion. Basically that every expanded element in a group collapses when another one opens, roughly similar to the Bootstrap accordion.

Also: when will resources inside the collapsed content be loaded? They might be placed far apart (not sure why anyone would do that but depending on the implementation it might be possible and someone will do it). I suggest when the toggle link/element itself is inside the view but after ever other visible resource is loaded. It might be even more complicated than that but it might also be not worth optimizing (don't know).

[stephanfowler]

👍 to this proposal. For reasons detailed here, this seems to provide a missing building block for expandable menus. (Which in our case need to make an async request for their content.)

[Markenson]

+1

[rudygalfi]

I would say this is partially addressed by #1849 (amp-accordion). Obviously there are many directions to go with enhancements, but I'll call out two things already mentioned in this thread to figure out if we should open separate tracking issues for them:

• Ability to dynamically fetch the data to be displayed when an amp-accordion header is clicked (just filed Support for: click something, send data, get response, update page #3459 to cover this)
• After reaching the end of some text, there's a (possibly overlaid) button that invites the user to "Read More". Upon clicking on this, more text is displayed and the button goes away. It's similar to how amp-accordion works, yet different. I'd like to know if amp-accordion will indeed cover this. If yes, we should introduce a good example on ampbyexample.com to demonstrate the pattern. If not, we should think if this is possibly covered by Support for: click something, send data, get response, update page #3459 or needs to be considered separately. @ericlindley-g

[ericlindley-g]

On the second question, the behavior is already possible with the current implementation, by using CSS attribute selectors to style the accordion header when it is expanded (has the expanded attribute). Setting visibility:hidden for the "Read More" header element in amp-accordion is a straightforward version of this (though it leaves a slight space in the content). (Setting display:none isn't possible, because it is over-ridden by a necessary, important! style for amp-accordion)

In another approach, which does not have the issue of the additional space, you can keep the heading but change the text in expanded/collapsed state. To do this, you toggle visibility or display on span elements, dependent on the expanded attribute to change the text. That way the text can read as "See More" when the accordion is collapsed and "See Less" when expanded.

For example:

In the CSS:

      section:not([expanded]) h2 #seeLess {
        display:none;
      }

      section[expanded] h2 #seeMore {
        display:none;
      }

In the HMTL:

<amp-accordion>
  <section>
    <h2>
      <span id="seeMore">See More</span>
      <span id="seeLess">See Less</span>
    </h2>
etc...

I'll work with @sebastianbenz to see what we can do in the way of an amp-by-example example for both of these

[rudygalfi]

@ericlindley-g owns the next follow up here. Maybe it makes the most sense to close this and open up the ABE issues stated above?

[ericlindley-g]

Never followed up on this, but ABE has that example at the link below, so we should be all set: https://ampbyexample.com/components/amp-accordion/