Show morefeature

We've run into a problem now that thelistssection is after theAboutsection. TheAboutsection 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 thelistssection, 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 ashow moreUI feature that will crop theAbouttext after a certain length and give the user a button to reveal the hidden text:

Figure 2.8.Show morefeature

We'll start by adding acontractedclassto theptag that contains theabouttext interpolation. The CSS rule for this class will restrict its height to 250 pixels and hide any text overflowing the element.

index.html:

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

style.css:

.about p.contracted {
  height: 250px;
  overflow: hidden;
}

We'll also put a button after theptag that the user can click to expand the section to full height.

index.html:

<p class="about">
  <h3>About this listing</h3>
  <p class="contracted">{{ about }}</p>
  <button class="more">+ More</button>
</p>

Here's the CSS that's needed, including a generic button rule that will provide base styling for all buttons that we'll add throughout the project.

style.css:

button {
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
}

.about button.more {
  background: transparent;
  border: 0;
  color: #008489;
  padding: 0;
  font-size: 17px;
  font-weight: bold;
}

.about button.more:hover, 
.about button.more:focus, 
.about button.more:active {
  text-decoration: underline;
  outline: none;
}

To make this work, we need a way to remove thecontractedclass when the user clicks theMorebutton. Seems like a good job for directives!