|
JQuery multiple show and hide div’s based on click event |
||||||||
This article shows how to use JQuery to show and hide many div's at the same time, revealing the content that the user requests. It also degrades gracefully if you turn off Javascript.
Have you ever tried to display a Questions and Answers type page, where the Question is a clickable link that shows the corresponding Answer (FAQ's)? It is quite tricky to make this interesting, and Accessible to impaired users.
A full demo of multiple show and hide divs is here: link
The reason I started trying to develop this functionality is that I couldn't use a select field jump event, as that is useless for screen readers, and displaying an old school header list with bookmark href links is just shockingly bad. This is Accessible, and more interesting to use.
My content is dynamically generated from a query, but here is an example of what it looks like:
2<h2>
3<a href="javascript:void(0);" id="showAnswer" class="showAnswer" ident="1">
4How far away is the Moon?</a>
5</h2>
6
7<div class="answers" id="answers1">
8I think its about 23km away.
9</div>
10
11<h2>
12<a href="javascript:void(0);" id="showAnswer" class="showAnswer" ident="2">
13Where is the coldest place on Earth?</a>
14</h2>
15
16<div class="answers" id="answers2">
17The coldest place, known as 'Ridge A' is located deep within the Antarctic Plateau. It has an average winter temperature of minus 94 degrees Fahrenheit (minus 70 degrees Celsius).
18</div>
19
20<h2>
21<a href="javascript:void(0);" id="showAnswer" class="showAnswer" ident="3">
22Golden Delicious, Granny Smith and Gala are types of which fruit?</a>
23</h2>
24
25<div class="answers" id="answers3">
26They are all types of Apple.
27</div>
28</cfoutput>
Each of the links has a unique ident attribute value (1,2,3) this is used in the following JQuery script to determine which child div to toggle.
Start off by calling the JQuery library from Google. Next we have a function that loads when the rest of the DOM is ready.
Next we hide all div's that have and id that contains the string 'answers'. In this way when the page loads all the divs are hidden.
Next we have our click event, which is based on a selector for the 'showAnswer' class. This will hide all the divs in the same way as above, to make sure we don't have tow div's open at the same time. Next it gets the ident value of the clicked link, and builds a selector to toggle.
2
3<s/cript language="javascript">
4$(document).ready(function() {
5
6 // hide all the div elements with answers in the class name
7 $("div[id^='answers']").hide();
8
9 // toggles the divs on click of the links
10 $('.showAnswer').click(function() {
11
12 // hide all the divs
13 $("div[id^='answers']").hide(200);
14
15 var ident = $(this).attr('ident');
16
17 // show the clicked div
18 $('#answers' + ident).toggle(200);
19
20 return false;
21 });
22});
23</script>
I briefly looked at using the child() or next() JQuery methods so that I didn't need a unique identifier to do this, but didn't get either of those working in anywhere near as simple a way as this. (was 15-20 lines of code)
If anyone knows a more modular, detached way of doing this it would be good to see.
A full demo of multiple show and hide divs is here: link
<InvalidTag type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/...;
<InvalidTag type="text/javascript">
$(document).ready(function() {
$('dd').hide();
$('dt').click(function() {
$('dd').hide(200);
$(this).next().show(200);
});
});
</script>
<dl>
<dt>How far away is the Moon?</dt>
<dd>I think its about 23km away.</dd>
<dt>Where is the coldest place on Earth?</dt>
<dd>The coldest place, known as 'Ridge A' is located deep within the Antarctic Plateau. It has an average winter temperature of minus 94 degrees Fahrenheit (minus 70 degrees Celsius).</dd>
<dt>Golden Delicious, Granny Smith and Gala are types of which fruit?</dt>
<dd>They are all types of Apple.</dd>
</dl>
I like that! Thats much neater than mine! I was looking for a way to de-couple the JQuery from any sort of index value passed into the query loop. That seemed a bit old school JavaScript.
Its really impressive that this functionlity is only four lines long!
Thanks
Shaun