slide effect of jQuery

Question

Hi I have been having this problem with a slide effect of jQuery, the effect I want to get is as you click on the question the answer slides down. It is working for the first one, but isn't for the next few questions. Here is a link to the example http://jsfiddle.net/p8CLN/3/ $(document).ready(function(){ $("#question").click(function(){ $("#answer").slideToggle("slow"); }); }); I have really been stumped on this one.

You're not supposed to have more than one occurrence for each ID. — Terry, Mar 02 '13 at 00:48
ID's are unique, voting to close as duplicate of ten thousand others! — adeneo, Mar 02 '13 at 00:48
@Terry you're not *allowed* to have more than one occurrence for each ID. — Explosion Pills, Mar 02 '13 at 00:49
Thanks, I didn't know that. But what would be the easiest way to solve the problem for it? — user1848831, Mar 02 '13 at 00:49

score 2 · Accepted Answer · answered Mar 02 '13 at 00:50

2

Convert all your IDs to classes, and give the click function a context:

$(document).ready(function(){
    $(".question").click(function(){
        $(this).next(".answer").slideToggle("slow");
    });
});

See updated fiddle here - http://jsfiddle.net/teddyrised/p8CLN/8/

answered Mar 02 '13 at 00:50

Terry

57,476
13
82
106

Thanks terry this solved my problems and was exactly what I was looking for – user1848831 Mar 02 '13 at 00:52
You're welcome. If it has helped you, do accept it as an answer. – Terry Mar 02 '13 at 00:54
Yes thanks I will I can only accept it in 6 min though – user1848831 Mar 02 '13 at 00:57

score 0 · Answer 2 · answered Mar 02 '13 at 00:50

0

IDs MUST be unique.

Here is an updated Fiddle. I have replaced the IDs with a class name and used .next() to get the appropriate answer element.

answered Mar 02 '13 at 00:50

Niet the Dark Absol

311,322
76
447
566

score 0 · Answer 3 · answered Mar 02 '13 at 00:52

It is because you are using multiple elements with id's of question and answer. Id's MUST be unique as jquery will stop building a collection after the first id it finds.

I have updated your fiddle to fix:

http://jsfiddle.net/p8CLN/6/

Note I also needed to change CSS and added a use next('.answer') to target the toggle only to the subsequent answer to the clicked question.

        $(document).ready(function(){
          $(".question").click(function(){
            $(this).next(".answer").slideToggle("slow");
          });
        });

score 0 · Answer 4 · answered Mar 02 '13 at 03:14

you provide same id for the multiple elements. the ids must be unique. once the document is ready. on document.ready you can bind a click event you can use the next as a solution. here is the example

$(document).ready(function()
{
$(".question").click(function()
{
$(this).next(".answer).slideToggle("slow");
});
});

slide effect of jQuery

4 Answers4