Show more feature

We've run into a problem now that the lists section is after the About section. The About section has an arbitrary length, and in some of the mock listings that we'll add you'll see that this section is quite long.

We don't want it to dominate the page and force the user to do a lot of unwelcome scrolling to see the lists section, so we need a way to hide some of the text if it's too long, yet allow the user to view the full text if they choose.

Let's add a show more UI feature that will crop the About text after a certain length and give the user a button to reveal the hidden text:

Figure 2.8. Show more feature

We'll start by adding a contracted class to the p tag that contains the about text interpolation. The CSS rule for this class will restrict its height to 250 pixels and hide any text overflowing the element.

index.html:

<div class="about">
  <h3>About this listing</h3>
  <p class="contracted">{{ about }}</p>
</div>

style.css:

.about p...