0

I am creating an amp for my webpage. It contains lot of description about places. I want to implement ..show more after 4 lines so that user can see other content also in the mobile first fold (Text is dynamic so can be less than 4 lines also. In that case how can i determine that show more will not come) Is this possible with AMP?? Since I cannot use javascript and css solution is not possible for this, please help me in finding alternatives for the same. I have searched a lot about this but no luck so far. Thanks in advance

Sanchit Gupta
  • 3,148
  • 2
  • 28
  • 36
Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56

1 Answers1

0

You can use an amp-accordion for this:

<p>The first four lines...</p>  
<amp-accordion disable-session-states>
  <section>
    <h4>
      <span class="show-more">Show more</span>
    </h4>
    <p>The remaining text... </p>
  </section>
</amp-accordion>

Here is a working example.

Sebastian Benz
  • 4,238
  • 1
  • 21
  • 17
  • How will I determine if show more needs to be present or not?? Text can be less than 4 lines also in some cases – Ankur Aggarwal Mar 18 '17 at 18:56
  • You have to handle this server-side. – Sebastian Benz Mar 18 '17 at 18:57
  • How can server handle a situation like this as different devices will have different number of words in 4 lines, so it wont be possible to know from server this show more needs to be shown or not – Ankur Aggarwal Mar 18 '17 at 19:06
  • Simple ways to handle it on the server are: either always show the same amount of shortened text or provide two different versions for small and large screen using media queries. – Sebastian Benz Mar 18 '17 at 19:52