Have a slight issue which i could use some help on - Making an accordion content element - When a user opens a drop down element an image i have placed on the side changes from an arrow facing right to an arrow facing left to show that the column is open. but when the user clicks on another accordion tab / panel the arrow does not revert back and i do not know how to code this as i am a complete novice with jquery!

Have taken this code from an online source and implemented it / change elements but you will see "img1" and "img2" these are the two images in context.

$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
$(this).find('.img1').addClass('img2');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
$('.accordianButton').find('.img2').addClass('img1');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.accordionContent').hide();
});

If someone could show me a solution / explain how to do this, itd be a great help!

Yeah, no problem if the tables were just a quick way to get something mocked up.

However, before you use this code on a live site, this is something I personally would address.Maybe you could head over to the CSS forum and see if you can find someone to help you restructure the accordion.