More Showing, More Hiding
We've received a number of comments recently from people looking for variations on the showing and hiding theme. For the basics, you can take a look at two earlier entries, Basic Show and Hide and Slicker Show and Hide.
For a full-blown plugin solution with lots of options, look no further than Jörn Zaefferer's Accordion Menu. But if you want to try some showing and hiding on your own, read on.
Caveat
In this tutorial, we'll explore a couple ways to show and hide details by clicking on headings. I recognize that there are many ways to mark up the HTML for this sort of thing, and many more ways to write the JavaScript/jQuery. Even the functionality can vary greatly, depending on your needs. Some common variations include:
- each detail shows and hides independently of others
- one and only one detail visible at a time
- either no detail or one detail visible at a time
We'll take a look at the first two variations this time, and the third in a separate entry (so that I can get something posted more quickly).
The Setup
As with any jQuery script, we need to include the jquery.js file and our custom script file in the <head>, like so:
It's important to include jquery.js before any other files that use it. Also, you may need to change the path to match your site's structure.
For the elements to show and hide, we'll use a simple <h3> / <div> structure:
Title 1
Title 2
Title 3
Now let's add to that a little CSS to shape things up a bit:
[css].demo-show { width: 350px; margin: 1em .5em; } .demo-show h3 { margin: 0; padding: .25em; background: #bfcd93; border-top: 1px solid #386785; border-bottom: 1px solid #386785; } .demo-show div { padding: .5em .25em; }[/css]Finally, we can get to the scripting.
Option 1: Independent
Remember, this is the option that allows each detail section to be shown or hidden independently of the others. It's also the easiest of the three to accomplish.
The key method we'll be using here is .slidetoggle(), an excellent little effect that slides the matching elements down when they are hidden and slides them up when they are visible. But before we do that, let's make all of the detail sections hide when the DOM is ready:
Line 2 gets every <div> that is a child of the first <div class="demo-show"> and hides them. I'm using :eq(0) here because I'll be showing two show-hide examples that use the same class, but we're taking the examples one at a time.
Now, we can bind a click handler to each <h3> that is a child of <div class="demo-show">. You can see this in line 3 below:
All that's left is to drop the .slidetoggle() method inside the click method. Since we know that each <div> that we want to toggle appears next to each <h3> that might be clicked, we can use the handy .next() method (line 4):
I used the "fast" option for the duration of the slide, but we also could haved used "slow" or "normal" or a numeric value for the number of milliseconds.
Try out the demo. See how a click on each <h3> will show or hide the next <div>, independent of the others:
Title 1
Title 2
Title 3
Option 2: One and Only
Let's move on now to the scenario in which we want one detail <div> at all times, but no more than one. The first thing we'll need to change for this one is the line that hides all of the child <div>s of <div class="demo-show">. We'll make it hide all but the first <div>:
Again, we add an :eq() to the containing <div> selector, this time with 1 as the index, because we want our second demo (and because JavaScript numbering starts at zero).
Next, we add the same click handler for the <h3> elements, but this time we need to change the effects that take place within it:
Line 4 above slides down the <div> that follows the clicked <h3> by using $(this).next(), but only if that <div> is hidden (:hidden). Also, now that we've chained .next() onto $(this), we've changed the context to that following <div>. So then in line 5 when we refer to .siblings(), we're actually getting the siblings of the <div>. Since out of all the siblings we only want to slide up the slides up the ones that are visible <div>s, we use .siblings('div:visible').
Give demo #2 a whirl:
Title 1
Title 2
Title 3
There you have it—two fairly straightforward examples of showing and hiding elements on a page. Next time we'll take a look at two ways we can implement the third variation on the showing-and-hiding theme: having either no detail or only one shown at all times.
