How to implement a "show more" on a large body of text in AMP?

Question

I have a large body of text, which I would like to have partially hidden on page load while retaining the entire text as a single body of text, so it's only the view-ability which is altered.

Example

From:

An abstract of information about a document which is really long and could be thousands of words long...

Show

To:

An abstract of information about a document which is really long and could be thousands of words long which can be here and there any everywhere, more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more.

Hide

I aware you can perform similar behaviour using an amp-accordion, but in this situation the ellipses (the "...") must disappear and append the remaining body of text. This is important so search engines can index the entire abstract text as one entity.

Is this possible to implement using an AMP page?

score 4 · Answer 1 · answered Aug 10 '17 at 07:13

I have same case and find the clear way to resolve.

This can be done via amp-bind. You can use an implicit state variable, e.g. visible, to track the current state.

<button [text]="visible ? 'Show Less' : 'Show More'" on="tap:AMP.setState({visible: !visible})">
Show More </button>
<p [class]="visible ? 'show' : 'hide'" class="hide">Some more content.</p>

Original answer from : AMP: easy way to toggle a CSS class?

score 2 · Answer 2 · answered Dec 19 '16 at 14:41

One solution to this could be using an amp accordion and styling the header to look like a paragraph and then adding a hyperlink to the text at the end. It would mean that the whole h2 is clickable but the anchor mould give them direction.

I don't know what googles stance on duplicate content for this would be since you are showing portion of the text in a h2 and then hiding it on the click and displaying the full paragraph.

look at https://ampbyexample.com/components/amp-accordion/ and the "Here is another example, which hides the "Show more" button once it's been clicked." example

score 0 · Answer 3 · answered Dec 15 '16 at 17:51

I can't see any tutorials or articles on how to do it specifically with AMP. However, you can follow this tutorial about Implementing “Show More/Less” Functionality with Pure CSS. Just be noted with the styles that aren’t allowed in AMP pages.

Additionally, I found this GitHub sample that has Show more button and if the amp-list content requires more space than available, the AMP runtime will display the overflow element (if specified).

<amp-list width=auto height=10 layout=fixed-height src="<%host%>/json/examples.json" template="amp-template-id">
    <div>
  <button overflow role=button aria-label="Show more" class="list-overflow">
    Show more
  </button>
    </div>

Hope this helps!

score 0 · Answer 4 · answered Feb 07 '18 at 17:19

It can be simply done by using an amp-accordion

amp html:

<amp-accordion disable-session-states>
  <section>
    <h4>
      <span class="show-more">Show more</span>
      <span class="show-less">Show less</span>
    </h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. </p>
  </section>
</amp-accordion>

amp css will be:

amp-accordion section[expanded] .show-more {
  display: none;
}
amp-accordion section:not([expanded]) .show-less {
  display: none;
}

How to implement a "show more" on a large body of text in AMP?

4 Answers4