SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Accordion Image change

    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.

    Code:
    $(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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    Code JavaScript:
    $(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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •