Good day, I'm struggling with getting the arrow switch to work correctly for slideToggle. Even though I have three of them, the arrow changes only for the first one - no matter which div I click on. Any suggestions on what I might be missing? Thank you.
//jquery
$(document).ready(function(){
$('.flip').click(function(){
$(this).next('.panel').slideToggle('fast');
var src = $('#arrow').attr('src') == "arrow-down.png" ? "arrow-up.png" : "arrow-down.png";
$('#arrow').attr('src', src);
});
});
//html
<div id="container">
<div class="flip">One <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Foo</p>
</div>
</div>
<div id="container">
<div class="flip">Two <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Bar</p>
</div>
</div>
<div id="container">
<div class="flip">Xxx <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Yyy</p>
</div>