'More Content Available' Link With Fade Out

Suppose you have a section on your web page with a lot of content.

Some users might want to read the content. Others, not. For those who do not, all that content may be in the way of what they came to the page to find.

One solution is to present only the top part of the content, making the rest of it optional to view. To see the rest of the content that is available, the user can tap a "more" link.

This article presents that solution.

The content can be any content a web page can publish — text, images, videos, forms.

At the bottom of the immediately visible part of the content, the content is faded out. On top of the faded area is the "more" link to tap.

The "more" link may be text or an image.

It's set up like this.

When the "more" link is tapped, the fading and the link disappear and the containing div opens up to reveal all of the content.

The revelation of the content in the containing div can be slow or fast, your choice. For backward compatibility, browsers that don't support the CSS transition property will reveal the content suddenly, without a transition period.

Here is a live example.

Implementing the 'More Content Available' Link

The content is put into a containing div. (The containing div must have an id value. An id value MoreLink_content-container is assumed in the example code.) The div can be provided with whatever margins and padding and other CSS styles you desire.

At the bottom of the content containing div is a div positioned on top of the content. The div fades the content and also contains the "more" link to tap to reveal all content. (This div also must have an id value. The id value MoreLink_fade-out-div is assumed in the example code.)

There is JavaScript to enable the functionality. It is copy and paste unless you decide to change the id values of the two above-mentioned divs.

Those are the three parts required for implementing the 'more content available' link.

Detailed Instructions

Here is the source code for implementing the example. Detailed instructions for putting it on your web page follow the source code.

<div id="MoreLink_content-container" style="
   position:relative; 
   height:80px; 
   transition-property:height; 
   transition-duration:2s;
   overflow:hidden;">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis vel augue ornare venenatis. Morbi ultricies augue urna, faucibus mollis mi feugiat vel. Proin volutpat blandit urna, tincidunt tristique purus blandit ut. Suspendisse et purus non arcu volutpat sagittis. Sed quis consectetur ante. Maecenas elementum feugiat eget sit amet turpis. Sed ut nisl et dolor posuere urna vel nibh tempor, in sagittis ligula fringilla.
</p>
<p>
Aliquam vel commodo lacus. Sem eros vestibulum lacus, ac interdum quam nunc at est. Donec porttitor et nibh et ullamcorper.
</p>
<p>
Sed ut nisl et dolor posuere feugiat eget sit amet turpis.
</p>
<p>
(To see example again. reload web page.)
</p>

<div id="MoreLink_fade-out-div" style="
   position:absolute;
   bottom:0;
   height:3em;
   width:100%;
   background:linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) );
   ">

   <div style="
      position:absolute; 
      bottom:0; 
      left:0; 
      right:0; 
      text-align:center;">
<a href="javascript:MoreLink_RevealMore()">
<span style="background-color:white; padding-left:.5em; padding-right:.5em;">&mdash; more &mdash;</span>
</a>
   </div>

</div>

</div>

<script type="text/javascript">
function MoreLink_RevealMore()
{
   document.getElementById("MoreLink_fade-out-div").style.display = "none";
   var h = document.getElementById("MoreLink_content-container");
   h.style.height = h.scrollHeight + "px";
}
</script>

Paste the above into a test web page. Then make changes. When done with the detailed instructions, you should have a pretty good handle on how to create a 'more content available' container for yourself.

The Content Container Div

The content container div holds everything except the JavaScript near the bottom of the code you pasted into your test web page. The JavaScript is below the div.

The MoreLink_content-container is the ID of the content container. A corresponding MoreLink_content-container is in the JavaScript. If one of those two is changed, both instances must be changed to match.

In the style of the content containing div tag, you'll see height:80px;

Change 80 to the number of pixels high the content container should be when the web page first loads.

Also in the style of the content containing div tag, you'll see transition-duration:2s;

Change 2 to the number of seconds to elapse from when the div begins to reveal all its content to when it has completely revealed all of it. (The revealing happens when the "more" link is clicked. See further below.)

Replace the temporary text content in the content container div to what you want to display.

The Fade-Out Div With "More" Link

The fade-out div is located at the bottom of the content containing div. It has CSS to fade the content immediately underneath it and a "more" link to tap for revealing the rest of the content.

The MoreLink_fade-out-div is the ID of the fade-out div. A corresponding MoreLink_fade-out-div is in the JavaScript. If one of those two is changed, both instances must be changed to match.

In the style of the fade-out div tag, you'll see height:3em;

Change 3em to the height you want for the fade-out div.

You'll also see this line for the div content.

<span style="background-color:white; padding-left:.5em; padding-right:.5em;">&mdash; more &mdash;</span>

That provides the "more" link, specifically: — more —

The text for the link may be changed or replaced with an image.

The JavaScript

No changes are required in the JavaScript — unless one of the div id values mentioned above are changed. In that case, the corresponding change needs to be made in the JavaScript.

All Done

With the above, you have implemented a 'more content available' link with fadeout for enhancing your site user experiences. You now have a tool you can use to implement the functionality on other pages.

It is a wonderful way to make content available for those who want it, yet have it out of the way for those who do not.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager