jQuery FAQ Expand/contract
I've seen some code out there for this, but I've not managed to Google anything I like. My version uses HTML's Definition Lists. <DL>, <DT> and <DD>. Click on one of the questions below to see it in action.
N.B. Thanks to Peter Boughton's comment. Though I try using next() and it wasn't working for me, hence the ID hack I did have. Anyway, thanks Pete.
- Question 1
- FAQ Answer 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 2
- FAQ Answer 2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 3
- FAQ Answer 3: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 4
- FAQ Answer 4: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 5
- FAQ Answer 5: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
1 <script src="/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
2
3 <script type="text/javascript">
4 $(document).ready(function(){
5 $("dt").click(function () {
6 $('dd:visible').slideUp('fast');
7 $(this).next('dd').slideDown('fast');
8 });
9 });
10 </script>
11
12
13 <style>
14 /* Hide all DD's at the start*/
15 dd{display:none;}
16 </style>
17
18 <!-- Some FAQ Questions -->
19 <cfoutput>
20 <dl>
21 <cfloop from="1" to="5" index="i">
22 <dt class="q#i#">Question #i#</dt>
23 <dd id="q#i#">FAQ Answer #i#: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.</dd>
24 </cfloop>
25 </dl>
26 </cfoutput>
2
3 <script type="text/javascript">
4 $(document).ready(function(){
5 $("dt").click(function () {
6 $('dd:visible').slideUp('fast');
7 $(this).next('dd').slideDown('fast');
8 });
9 });
10 </script>
11
12
13 <style>
14 /* Hide all DD's at the start*/
15 dd{display:none;}
16 </style>
17
18 <!-- Some FAQ Questions -->
19 <cfoutput>
20 <dl>
21 <cfloop from="1" to="5" index="i">
22 <dt class="q#i#">Question #i#</dt>
23 <dd id="q#i#">FAQ Answer #i#: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.</dd>
24 </cfloop>
25 </dl>
26 </cfoutput>
TweetBacks
This works just fine:
$('dd:visible').slideUp('fast');
$(this).next('dd').slideDown('fast');
$(document).ready(function(){
$('dd').hide();
$("dt").click(function () {
$('dd:visible').slideUp('fast');
$(this).next('dd').slideDown('fast');
});
});
I recommend checking out this technique:
http://www.tjkdesign.com/articles/toggle_elements....
- It uses semantic markup.
- It degrades nicely (hidden elements are visible in script-disabled UAs).
- DTs do not appear as links without script support.
- It does not use inline event attribute (onclick()).
- It does not require A elements in the markup.
- It is screen-readers "friendly".
- It is keyboard "friendly".
- It is IE Mac compatible.
- It relies on one single hook.
- It allows the author to add/move/delete DT/DD pairs easily (there is no variable in the script to edit and there are no class or ID to include nor change).
- It is "powered" by a very light script (3Kb).
mine looks something like this:
javascript:
$(function(){
$("body").removeAttr('id');
$("#faq dt").click(function () {
$('#faq dd:visible').slideUp('fast');
$(this).next('dd').slideDown('fast');
});
});
css:
#faq dd{
display: none;
}
body#nojs #faq dd{
display: block;
}