Simple jQuery sliding visibility toggle

20/08/2009

I know this post is probably a couple of years late by now, but when I reworked my “Made on Linux”-page, I needed a way to display some information only when the user wanted it - without having to have multiple pages to send the user to. In other words, I needed to be able to hide a chunk of text, and then show it when the user clicked on something.

As I am no JavaScript wizard, I originally found this technique somewhere else, and got help from people over at StackOverflow to make it fit my needs. Sadly, I’ve now lost the original source, and Googling has led me nowhere. If the original author reads this, please email me and I will of course attribute you.

Now, on to the more interesting stuff! What we have is basically this:

This block takes up a lot of screen space, and if the user isn’t interested in reading about coffee, then it’s just a waste of space. This could also apply if you had a bunch of different headlines. Displaying the text for each of the headlines would take up a lot of screen space, and the user is probably only interested in one or two of the boxes anyway. Therefore we want to hide the text away until the user clicks on the headline, at which point the box should drop down and become visible.

Here’s our HTML:

<html><br />
<head></p>
<style type="text/css">
body {
	margin:50px 0px; padding:0px;
	text-align:center;
	}</p>
<p>#content {
	width:500px;
	margin:0px auto;
	text-align:left;
	}
.headline {
    background-color: 5c5c5c;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
h1 {
    margin-bottom:0em;
    margin-top:0em;
}
.headline p {
    margin: 0em;
}
.article {
    background-color: 9b9b9b;
    padding: 0.5em;
}
</style>
<p></head><br />
<body></p>
<div id="content">
<div class="headline">
<h1>Coffee is really tasty!</h1>
<p>Click here to learn more.</p>
</p></div>
<div class="article">
<p>Coffee is a brewed beverage prepared from roasted seeds, commonly called coffee beans, of the coffee plant. They are seeds of "coffee cherries" that grow on trees in over 50 countries. Green Coffee is the second most traded commodity in the world behind crude oil. Due to its caffeine content, coffee can have a stimulating effect in humans. Today, coffee is one of the most popular beverages worldwide.</p>
<p>It is supposed that the Ethiopians, the ancestors of today's Galla tribe, were the first to have discovered and recognized the energizing effect of the coffee bean plant. However, no direct evidence has ever been found revealing exactly where in Africa coffee grew, or who among the natives might have used it as a stimulant or even known about it there earlier than the seventeenth century. The earliest credible evidence of either coffee drinking or knowledge of the coffee tree appears in the middle of the fifteenth century, in the Sufi monasteries of the Yemen in southern Arabia. From Yemen, coffee spread to Egypt and Ethiopia, and by the 15th century, had reached Armenia, Persia, Turkey, and northern Africa. From the Muslim world, coffee spread to Italy, then to the rest of Europe, to Indonesia, and to the Americas.</p>
</p></div>
</div>
<p></body><br />
</html>

This certainly won’t win any design awards, but it’ll work for our example. Now to get that slide effect I was talking about, we’re going to use a JavaScript library called jQuery.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

The jQuery library can be downloaded from here.

Now here comes the JavaScript magic!

We simply insert the following snippet into the head of our page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script><br />
<script type="text/javascript">
$(document).ready(function()
{
    //hide the all of the element with class .article
    $(".article").hide();
    //When an element with the class .headline is clicked.
    $(".headline").click(function()
    {
        //toggle the next element found with the class .article
        $(this).nextAll(".article:first").slideToggle(800); //change the number to change duration of the slide
    });
});
</script>

Now try refreshing the page and clicking on the headline div. Voila! The article is hidden and displayed with a smooth animation when the user clicks on the headline.

The great thing about this script is that it doesn’t care if there’s a bunch of stuff in between the divs, it simply looks through your document for the next thing with the appropriate class.

That’s it for today. If you have other neat JavaScript snippets that you wish to share, please do email them to me, or post a link in the comments!

Tagged: CSS, HTML, JavaScript, Web in Uncategorized, Web

Show/hide

Written by Tommy Brunn

Tommy Brunn is the author of blastfromthepast.se. Currently he is living pretty much as close to the north pole as you can get (Luleå, Sweden). He devotes his spare time to learning about programming, developing a FOSS point-and-click adventure game, and is currently studying software engineering at Luleå University of Technology.