I'm kind of stuck here. I wanted to build a FAQ page with about 20 questions. To show the content of the questions I have a list with all questions and when you click on one question the answer is showing. Now I use the animation function (opacity:toggle) and a if/else to check which answer to fade in or out. I also use variables to know the status of the layer.

But since I have about 20 layers the JS will be huge and repeats itself. And if content is added I would have to change all code.

Is there a better way to do that, maybe more dynamic?

here's my script so fare:

2. var que1 = 'on';
3. var que2 = 'off';
4. var que3 = 'off';
5. …
6. 
   
8. $("a.q1").click(function() {
9. if (que1 == 'off' && que2 == 'on') {
10.           $("#que2").animate({
11.             opacity: 'toggle'
12.           }, setTimeout, function() {
13.           $("#que1").animate({
14.             opacity: 'toggle'}, 500);
15.           });
16.         que1 = 'on';
17.    que2 = 'off';
18. } else if (que1 == 'on') {
19.  
20. } else if (que1 == 'off' && que3 == 'on') {
21.           $("#que3").animate({
22.             opacity: 'toggle'
23.           }, setTimeout, function() {
24.           $("#que1").animate({
25.             opacity: 'toggle'}, 500);
26.           });
27.         que1 = 'on';
28.         que3 = 'off';
29.         } else if …
30.