I criticize by creation - not by finding fault.
Cicero (106-43 B.C.)
Accessible show/hide content with jquery
Update: Show/hide multiple elements independently
I'm a big fan of jquery since I don't often need to write any javascript, but for the times I do it cuts out most of the hassle of accessing on page elements, using CSS selectors and really helps with an accessible approach.
I recently wanted a section of a page to be hidden by default, with a link for users to show and hide the section. It's basically for an advanced options section of a form. What I wanted was to avoid any changes to the HTML whatsoever. Fortunately, jquery allows us to append content before an element, hide an element when the DOM is ready, and we can use an if else in order to change the link text from show to hide. Nothing groundbreaking or especially hard to do, but certainly useful. The code will hide a div with the CSS id hide_this (#hide_this), of course, alter this to suit the element you want to toggle.
// 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 the hidden text";
var hideText="Hide the text";
// create the toggle link
$("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");
// hide the content
$('#hide_this').hide();
// capture clicks on the newly created link
$('a#toggle_link').click(function() {
// change the link text
if ($('a#toggle_link').text()==showText) {
$('a#toggle_link').text(hideText);
}
else {
$('a#toggle_link').text(showText);
}
// toggle the display
$('#hide_this').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
Demo of the accessible show/hide code
With javascript disabled, this text is visible by default and there is no show/hide link.
17.05.2008. 13:30
Fritz Desir said on 24.09.2008. 04:20
Question, how would you use this if you have two or more sections of text on the same page both of which requiring show/hide?
Any reply would be greatly appreciated.
Andy said on 24.09.2008. 09:10
Do you want both sections hidden simultaneously, or to have links that hide them separately?
It's easy enough to achieve both. The function could be modified slightly so that it accepts a parameter to determine which section to hide.
Roman said on 04.10.2008. 12:42
I would like to get this work with images and not text. I mean Show/Hide by clicking on a image. Is it possible?
Andy said on 07.10.2008. 15:49
Sure, just edit the "text" used for show and hide to include on/off images, e.g.
var showText="<img src='/path/to/image_on.jpg'/>";
var hideText="<img src='/path/to/image_off.jpg'/>";
Justin Young said on 12.10.2008. 00:58
Since I know nothing, could you show how to modify the function so that it accepts a parameter to determine which section to hide - if you want multiple sections hidden.
Like: section 1
section 2
section 3
Thanks! Great Site
Andy said on 13.10.2008. 20:17
Sure - I used a slightly different approach, and put it into a new article, since this is quite commonly requested functionality.
Rahul - Web Guru said on 05.09.2009. 10:45
Quite cool script. Thanks mate.
ardianzzz said on 19.10.2009. 08:18
so simple, & functional too...
like it!
Kurt said on 19.10.2009. 10:57
Great code, found it very useful. I was having a bit of trouble having the same effects in IE as Firefox, however found that if you force IE8 into compatibility mode with a meta tag it worked.
Cheers.
danny said on 23.10.2009. 09:38
how would you move the hide/show to the bottom the hidden/shown material instead of above it?
danny said on 24.10.2009. 07:36
hi, just wondering if you were able to more the button below the text thats about to be hidden?
Mark L said on 20.02.2010. 16:37
Thanks for this. Very useful. Implementing as a method to show french version of a post under wordpress.
Fabio Varesano said on 05.03.2010. 11:01
Looks like you have an unclosed p tag in before()
Simon said on 22.04.2010. 10:33
This is nice little example, thanks. I've just used something similar to show/hide a left menu in order to make room for a wide table.
Brien said on 16.07.2010. 22:14
Thanks for the example. However, it doesn't address wider accessibility issues for various disabilities. Here is another approach that might be a useful reference for your own:
http://filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery/
Ekendra said on 08.11.2010. 13:42
Really simple and easy to use, thanks.
Kieran said on 10.02.2011. 12:23
Hi Andy,
Just wanted to say thanks for taking the time tocreate & share this, and for keeping it updated too. Great work.
SMan said on 06.05.2011. 16:58
I would like the show and hide be dependent on if there's content being shown within a div tag (e.g. div#related). This would affect a header, like My Header. So if div#related doesn't contain any content, hide My Header. If it does contain content, show the header.
Chetaru said on 15.09.2011. 14:12
Hi..
Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks
Tony Bragadoccio said on 12.12.2011. 18:37
How is this with accessibility rules? I.e., can blind people easily access the hidden info, or will it remain hidden to them, or will their page readers read the hidden info whether they care to or not?
Thanks.
Recent Responses:
Page last (manually) updated: October 14, 2011.
Questions, comments, insults or praise? Have your say: