Categories:

Site Search:

Find me at:

Jquery: show/hide multiple elements independently

Hiding a single element with Jquery was pretty straightforward. But what about if you want to show/hide multiple elements independently?

Thanks to Justin Young for requesting this new function and getting me to do something useful ;)

As before, the aim was to make portable, accessible code. All that's needed for the script to work is to give any element (an entire div, a paragraph, whatever) a CSS class of "toggle". The preceding element (i.e. the element directly above the thing with a class of toggle) will have a show/hide link added to it. This seemed like a good approach, and works especially well with sections marked up with headings.

The code


// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link
var showText="Show";
var hideText="Hide";

// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append('(<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// change the link text depending on whether the element is shown or hidden
if ($(this).text()==showText) {
$(this).text(hideText);
}
else {
$(this).text(showText);
}

// toggle the display
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Multiple show/hide in action

Section one: a div with a paragraph

You can show/hide an entire div by giving it a class of "toggle". Links and other child elements will work fine too. The element directly before this one is a heading, so it gets a show/hide link appended.

Section two: single paragraph

A single paragraph can be hidden by giving it a class of toggle too. I can't help but be impressed by how easy it is to use jquery - even for someone with limited programming and javascript experience like me. Again, the preceding element is a heading.

Now: a list

You can even hide a list
Just give the <ul> the toggle class
This time the preceding element is a paragraph

13.10.2008. 18:52

Justin Young said on 14.10.2008. 04:48

Thanks very much! Works great!

Andy said on 24.11.2008. 16:27

This may be a silly question but I'm new to Jquery and couldn't get it to work which got me wondering,..... is this a .php specific script (I'm just wondering as it's got the $ on each line). It doesn't seem to say in the article.

If it is, doesn anyone know of a similar solution for .asp as this one is really nice and clean.

Thx

Andy said on 24.11.2008. 16:30

It's pure javascript, but is based around the jquery library, so will run on any html page (including PHP and ASP-generated pages). Probably it didn't work because you didn't link to the jquery library itself. I'd suggest you start with "getting started" in the jquery docs:

http://docs.jquery.com/Main_Page

Ron McElfresh said on 24.11.2008. 19:37

I notice that the code above does not validate XHTML 1.0 transitional (using BBEdit) because of the

Andy said on 25.11.2008. 11:35

Hi Ron,

Apologies - I think the HTML you included got stripped (I'll look into sanitising that as opposed to ditching it entirely).

Generally, I include all javascript from external files, which means there can't be any validation problems. If the reason it doesn't validate is due to the HTML for a link included, you can split this up within the code so the validator doesn't confuse it for a link, or put comments around the whole script block. But I always favour external files for js which is IMO much cleaner.

MojoWill said on 25.11.2008. 21:04

Great script just what I was looking for is there anyway to make an entire line f text the toggler? or style the show/hide text somehow?

Im using it for a FAQ clickin to show the answers

http://testing.mostlymojo.com/hertford/faq.php

test said on 26.11.2008. 08:11

Hello,

this is not working in IE 6 + XHTML . kindly advice

Andy said on 26.11.2008. 10:09

You can easily style the toggle link - it has a CSS class of "togglelink".

To make the entire text a link, you can use the jquery "wrap" method:

http://docs.jquery.com/Manipulation/wrap#html

I.e. change the line

$(".toggle").prev().append('(<a href="#" class="toggleLink">'+showText+'</a>)');
to
$(".toggle").prev().wrap('<a href="#" class="toggleLink"></a>');
I haven't tested this, but should work in theory.

Andy said on 26.11.2008. 10:13

@test - what problem occurred? Did you get a javascript error? Are you using external js? It worked fine for me in IE when I tried it.

Tony said on 02.12.2008. 14:06

Hi there. This is an excellent script. Very like an Ajax Accordion that I was looking for, but using JS.

However, is it possible to modify the script so that the previous text is hidden when the next one is shown, more like the way an accordion works?

aguspuryanto said on 03.12.2008. 08:11

i want to replace text "Show" and "Hide" on the script with image. do you have solution?

// choose text for the show/hide link
var showText="Show";
var hideText="Hide";

Replace with:

var showText='';
var hideText='';

Site navigation