Show/Hide Content with CSS and JavaScript

Published May 5, 2008 by CSS Newbies.

There are plenty of reasons why you might feel the urge to wax verbose on your website’s front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page’s SEO. But just because your front page is text-heavy doesn’t mean it all needs to be visible at once.

Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

We’ll start with structuring our XHTML appropriately:

<p>...This is all visible content... 
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
	<p>...This content is hidden by default...</p>
	<p><a href="#" id="example-hide" class="hideLink" 
	onclick="showHide('example');return false;">Hide this content.</a></p>
</div>

There are three things of importance here: the “show” anchor, the “hide” anchor, and our “hidden” div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I’m then using the classes to set our “default” CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.

You’ll notice in the code above that all of our IDs are fairly similar. This is a trick I’m using to simplify our JavaScript, as you’ll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.

It’s also important to note that we’re calling our JavaScript using the “onclick” call, and passing it the name of our hidden div. Our JavaScript will use that single variable to do the rest of the work.

Now that we have our XHTML in place, let’s put together our default CSS:

.more {
	display: none;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666; }
a.showLink, a.hideLink {
	text-decoration: none;
	color: #36f;
	padding-left: 8px;
	background: transparent url('down.gif') no-repeat left; }
a.hideLink {
	background: transparent url('up.gif') no-repeat left; }
a.showLink:hover, a.hideLink:hover {
	border-bottom: 1px dotted #36f; }

I’m technically doing far more styling than is necessary here, mostly for aesthetic purposes. The only truly important style is the “display: none;” rule on our .more class. This hides our extra content by default. The rest of the CSS simply adds a border to our div (the border is hidden by the display rule, but becomes visible later) and fancied up our show/hide anchors by putting down/up arrows next to them and replacing the standard underline with a dotted border. You could style these yourself however you like, and everything would still work just fine.

Next comes the JavaScript, which looks far more complicated than it is:

function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = 'block';
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}

Our JavaScript is doing four things here:

  1. It checks to see if it can find an element with an ID that matches the variable we passed it.
  2. If so, it checks to see if our “show” link is visible (this is where the ID naming convention starts to matter).
  3. If the “show” link is visible, that means our content is still hidden. The JavaScript then hides the link and displays our hidden content.
  4. If the “show” link is hidden, that means our extra content is currently visible. So it just reverses course, displaying our link again and hiding our extra content.

And that’s it! You can see a working example in action here.

Our job has been made much simpler by a few tricksy tricks. First off, we’re using the same function to show and hide our content, which saves us a bit of coding time. Our function simply checks on the state of things: if things are hidden, it shows them, and vice-versa.

Second, by using a defined schema for our element IDs (“example,” “example-show,” and “example-hide,” in our example above), we only need to pass our JavaScript a single variable. It then uses that variable to find all of our other elements and style them appropriately.

And finally, we put our “hide this content” anchor inside the hidden div. This means that we never have to set its display property: it’s hidden when the container is hidden, and visible when the container is. That saves us two lines of JavaScript and at least one line of CSS.

This technique could be used in loads of situations. Say for example that you have a WordPress blog and the front page shows excerpts instead of the full article. You could use this technique to have the whole article on the front page for the search engines to find, visible to your users at the click of a button. Or maybe you have a complex form that could use some detailed in-page explanation, but you don’t always want the help content visible, eating up real estate when some users already know what to do. Or… well, anything, really. Let me know if you come up with any creative uses!

156 Responses

  1. Gareth (reply)

    Hello

    This is a Really excellant script, I use it on my website with the results so that I can display the past few weeks but expand to show all the results for the season if required.

    I do have a question however is it possible to place two Hide Anchors, one at the top where the expand anchor is located and one at the bottom after all the results. I did try adding two but the second one didn’t work.

    If you could advise it would be appreciated, otherwise this is a brilliant script

    Thanks

  2. quintin (reply)

    Sorry it shows now! But any tips on having multiple paragraphs with read more on the same page.. currently it keeps returning to the 1st paragraph when I press read more on any of the others. many thanks Quintin

  3. SaleBoat (reply)

    TO Add More than one per page!
    Read more.

    AKA just change the example#-show in the ID and then example#

    Something like that, i’m exhausted, hope this helps.

  4. Peter (reply)

    If I wanted to use this for an FAQ page – 10 or 15 questions with hidden answers, how would I change the code. I’ve tried a few things, but the first hidden answer always shows. Thanks.

    1. Outset (reply)

      I have the same issue. I see a few people have found a solution. I am trying to change div id’s and everything I can think of, but it doesn’t work yet. I’d like to use it for a FAQ. If you have the solution, please share. Thanks!

  5. Heidi Claire (reply)

    Published May 5, 2008 by Rob Glazebrook
    AND has never returned to this page – or is dead
    There are 3 or 4 questions that need answering
    Even if the answer is No, it would be polite to at least acknowledge some of the replies!!!

  6. notmey (reply)

    Hi.
    Thanks for the post, really helpful !

    One thing I want to know is is that possible to Hide every other id and show the one clicked.

    Like I have multiple Questions on a page and once a person clicks on a question It shows the answer and hides any other opened question.

    Any help will be grateful.

    Thanks

  7. JestaBlunt (reply)

    found only very simple tutorials about this…till now…this shows me exactly the details what i want to know like how to get a “see all…” link and have a “hide all” link and so on…good one, is bookmarked and the technic used ^^
    thx, peace jesta

  8. JC (reply)

    This is great!!!
    I want to use this for an FAQ page,multiple questions with hidden answers.
    How would I change the code???
    Thanks

    1. Outset (reply)

      Hi! It’s been awhile since you posted, but if you have the code to help the rest of us out, that would be great!! I am building a new website and I want to create a FAQ, just like this one that was built in Drupal: http://www.outsetmedia.com/for-retailers/retailer-faqs

      I can’t use the same code, so if you could share, that would be great. I can get my second question to post, but when I click to “See more”, it just unhides the answer from the first example question. Thanks for any help!

  9. JD (reply)

    I have found out how to add multiple hide and show boxes without the first box being shown. Find all the ID’s that say ‘example’ and change it to example2 for the second boxes or example3 for third box etc.

    This includes Read more.

  10. mark (reply)

    I do an internal online newsletter. each section might have 10-15 articles. I saw something in the blog about this but didn’t see the resolution. I want to read more (i.e. expand/expose more of the article) then hide, or automatically hide when the next article is clicked. I can only do one expand/hide per page. thanks for any help.

  11. Victor (reply)

    We stumbled over here by a different page and
    thought I might as well check things out. I like what I see so now i’m
    following you. Lookk forward to looking at your web page repeatedly.

  12. paul (reply)

    Hi guys ,

    I’m trying to do this to hide iframes until requested because putting 10 maps onto one page , especially in mobile ..doesn’t work well.

    This half works , but the revealed google map displays not as it should.

    -Paul

  13. Pingback: [RESOLVED]Designing of Web Page | ASP Questions & Answers

  14. Trent (reply)

    How is it possible to get this to work inside of a Table?

    Need To Stay Visible
    Need To Stay Visible
    Need To Hide
    Need To Hide
    Need To Hide

    It has been mind bottling me for some time now..

    1. Trent (reply)

      How is it possible to get this to work inside of a Table?

      Need To Stay Visible
      Need To Stay Visible
      Need To Hide
      Need To Hide
      Need To Hide

  15. fort wayne yellow pages (reply)

    Wit and Humor – When the consumer is attracted to a product because the advertisement
    makes them laugh, or it is entertaining. Their services include web
    designing, ad campaigns, business development, graphic designing,
    internet marketing, etc. Thanks to the induction of digital media,
    outdoor ads are revamped, redefined with which brands get a
    more renovated and eye-catching look to its onlookers.

  16. Dvoy (reply)

    I set my 2nd call to action into “hide this” but, I noticed on IE call to action is “read less” not “hide this”.

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>