YouTube show more button


Welcome one and all, kids of all ages to my new web development blog. This is my inaugural post  so here’s the brief history of me. I’m 26, living in Des Moines and I make web things. So lets get to it…

One of the challenges of being a web developer is that sometimes you need to cram handfuls of content on a page like a manatee into a tube top without cluttering things up. Of course Google is the king of simple and effective interfaces and they made a perfect way to show and hide long video descriptions under each YouTube video.

YouTube show more button

This is one of those things that is easy to overlook because it’s so easy to use that you don’t even think about it. Which is why it’s perfect to recreate for ourselves.

View demo Download example

HTML

First lets set up the HTML

<div class="description">
	<div class="description-text">
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</div> <!-- description-text -->
	<div class="description-fadeout"></div>
	<button class="showhide" type="button" onClick="return false;" role="button"><span class="showhide-text">Show more</span></button>
</div> <!-- description -->

The <div class="description"> encapsulates everything and the <div class="description-text"> is the actual content that we will be collapsing and expanding. The trigger will be controlled by <button class="showhide">

CSS

The setup

The CSS magic that shows and hides our content all boils down to the overflow property. When we want to hide our content we set a height for our div and set overflow: hidden. This hides anything beyond the initial height set. When we want to show our content we will add the “expanded” class to our wrapper and set height: auto to expand the div around all of our content.

.description {
	position: relative; /* To position the button */
}
.description .description-text {
	height: 50px; /* Can be any value depending on how much you want to show */
	overflow: hidden;
}
.description.expanded .description-text {
	height: auto;
}

We also added position: relative to the wrapper so that we can absolutely position our button to the bottom later.

Show more button

The “Show more” button looks similar to a regular button but fades to white at the top, let’s add the gray to white gradient to our button’s class .description .showhide. I created this gradient using the Ultimate CSS Gradient Generator

.description .showhide {
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
}
}

Add the bottom-border and border-radius. Note that I’m declaring the other three borders to be 0 since browsers by default add a border to buttons

border: solid #ccc;
border-radius: 0 0 5px 5px;
border-width: 0 0 1px 0;

Make the cursor turn into a pointer when it hovers over the button, do a little more styling and position the button to be fixed at the bottom of the <div class="description"> wrapper.

cursor: pointer; /* If not in your css reset already */
font-size: 12px;
height: 16px;
padding: 0;
position: absolute;
bottom: 0;
vertical-align: middle;
width: 100%;

Some browsers maintain an outline around the button after you click it, lets turn that off

.description .showhide:hover, .description .showhide:focus {
	outline: 0;
}

Add hover states to turn the gradient light blue

.description .showhide:hover {
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(234,242,253,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,242,253,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EAF2FD',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,242,253,1) 100%); /* W3C */
}

Lastly let’s add the arrow next to the text, if you want to get fancy you can use sprites. However, I got lazy and just used single images

.description .showhide .showhide-text {
	background: url(img/down-arrow.gif) right no-repeat;
	padding-right: 12px;
}
.description .showhide:hover .showhide-text {
	background-image: url(img/down-arrow-hover.gif);
}
.description.expanded .showhide .showhide-text {
	background: url(img/up-arrow.gif) right no-repeat;
}
.description.expanded .showhide:hover .showhide-text {
	background-image: url(img/up-arrow-hover.gif);
}

By now our button should be looking good, real good.

Show more button

The fade

One last piece of CSS before we get to the jQuery. In order to get the user to click on the button you need to make it obvious that there is more content to be shown. So we’ll add a slight fade to cover up a portion of the text so it is REALLY obvious.

.description-fadeout {
	display: block;
	height: 8px;
	margin: 0;
	position: absolute;
	bottom: 16px;
	width: 100%;
	z-index: 999;

	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
}

This empty div is positioned right above our button to create the fade effect. It takes advantage of RGBa alpha transparencies to make the fade visible when it is overlappint text or other content.

Show more with fade

jQuery

Let’s wrap this mother up. First load jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>

We’re going to code this so that we can use multiple of these show more buttons on each page. So lets wait for the DOM to get ready to manipulate and then create a function to interact with each button

<script type="text/javascript">
$(document).ready(function() {
	$('.description .showhide').each(function() {

Next define our variables in relation to each show more button, let’s define the button, the wrapper div and text inside the button so that we can change it’s text

var showHideButton = $(this), description = showHideButton.parent(), showHideText = showHideButton.children('span');

Finally when the user clicks the button, add the “expanded” class to the wrapper and change the text of the button. Then close everything up

showHideButton.click(function() {
	description.toggleClass('expanded');
	showHideText.text(showHideText.text() == 'Show more' ? 'Show less' : 'Show more');
}); }); }); </script>

Put it all together

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.description .showhide').each(function() {
		var showHideButton = $(this), description = showHideButton.parent(), showHideText = showHideButton.children('span');
		showHideButton.click(function() {
			description.toggleClass('expanded');
			showHideText.text(showHideText.text() == 'Show more' ? 'Show less' : 'Show more');
		});
	});
});
</script>

View demo Download example


18 Comments

  1. Pingback:
  2. Nice tutorial! Will be trying this out over the weekend.


  3. Can’t all this browser specific, non maintainable, CSS be replaced with the modernizr script?


    • There are ways to make maintaining vendor-specific CSS easier, I wasn’t covering those in this tutorial though.


      Seth Stevenson -
  4. Good work sir ^_^

    can i ask how about i would like when i open the page the show more is automatic in show less were in the content is automatically showed


    • Start with:

      <div class=​"description expanded">

      And:

      <button class="showhide" type="button" onClick="return false;" role="button"><span class="showhide-text">Show less</span></button>

      Seth Stevenson -
  5. Hello. Nice Tut i am trying this on a demo eshop to show hide the product filters but my filters is in a table. And the height:auto is not working. Any suggestion maybe?
    Thanks.


    geompak -
    • Hard to guess without seeing it, but I’m guessing maybe you need to apply a clearfix to your table or after your table.


      Seth Stevenson -
  6. Nice tutorial, thank you. I’m using it right now but is there a way to not show the button if the text area is less than the specified div height? THanks


    • You could first evaluate the length of the .description-text div using jQuery. Then if there is enough characters apply the show/hide, otherwise hide the button.


      Seth Stevenson -
      • any way to help me with this? I don’t know jQuery and tried to integrate this tutorial with other ones that count characters but I’m having trouble with getting the button showing instead of (read more) text.


  7. Where do I put the JS on a WordPress site?


    Francis -
    • There’s a few options. The easiest is probably to put it right in your template. I would put it somewhere in the footer. I normally have a generic scripts.js file where I put these types of scripts, then I include in the footer of my template. Alternatively you could turn this whole thing into a plugin or add it to your functions.php file.


  8. Pingback:
  9. Pingback:

Speak up!