Jquery Accordion Image change

JavaScript
1

Hey all,

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!

Many thanks

2

Hi there,

This shouldn’t be too difficult to sort out.
Could you post a link to a page where I can see said accordion?

3

The site isnt currently live - im doing this on local so i have uploaded the files into a rar - http://www.sendspace.com/file/pv7vsz

Many thanks

4

Hi,

Thanks for that.
Change your JS to this and it’ll work:

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

Also, it might be worth rethinking your HTML.
Using tables for layout purposes isn’t a great idea.

5

Thank you so much! i will one day get round to learning jQuery / Javascript!

As for the tables - it was a quick way around it, assuming its possible to set up tables using css? or is there another way (i understand that everyone should run to the hills when they see tables!)

6

Hi,

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.

If you post back here when you are done, we can tidy up the JS, too.