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...