two buttons conflicting in javascript

Question

I have two buttons that are divs and two paragraph, they each match up to each other. So you click button one, button one rotates 45 degrees and toggleslides paragraph one open, button two does the same except for paragraph two. For some reason though if you click the first button it opens both paragraphs, and if you click button two nothing happens, and I can't figure out why. I'm going to need to set up multiple buttons and paragraphs eventually.

var epidural_analgesia_INFO = document.images[0];
epidural_analgesia_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");

var epidural_analgesia_DEG = 0;

epidural_analgesia_INFO.addEventListener('click', function() {
$("p#epidural_analgesia_TEXT").slideToggle("fast");
epidural_analgesia_DEG += 45;
epidural_analgesia_INFO.style.setProperty('-webkit-transform', 'rotateZ('+epidural_analgesia_DEG+'deg)');   
});




var effects_of_yoga_INFO = document.images[0];
effects_of_yoga_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out");

var effects_of_yoga_DEG = 0;

effects_of_yoga_INFO.addEventListener('click', function() {
$("p#effects_of_yoga_TEXT").slideToggle("fast");
effects_of_yoga_DEG += 45;
effects_of_yoga_INFO.style.setProperty('-webkit-transform', 'rotateZ('+effects_of_yoga_DEG+'deg)');   
});

I have a fiddle setup, but it's large and so I've pulled out the specific parts here, but if you want to see teh fiddle it's here: http://jsfiddle.net/loriensleafs/AM2a2/12/ thanks very much for helping me.

Answer 1

You're assigning your click handlers to the elements referenced by these two variables:

epidural_analgesia_INFO
effects_of_yoga_INFO

but both variables are initialised to reference document.images[0] . So clicking that image triggers both handlers. Should the second one perhaps use an index of 1 to get the second image?

(As an aside, why use addEventListener() when you seem to be using jQuery?)

Answer 2

got it, in teh first line

var epidural_analgesia_INFO = document.getElementById('epidural_analgesia_INFO');

instead of

var effects_of_yoga_INFO = document.images[0];