SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Accordian isuues.

    Can anyone tell me how I would adapt the following code so that the first section of the accordian is always open when the page is loaded please?
    At present all the sections of the accordion are closed when the page loads and when the user clicks on a heading the relevant section opens and then slides shut when another section heading is clicked.

    any help much appreciated.

    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');
    		  
    		//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');
    			  
    			//OPEN THE SLIDE
    			$(this).next().slideDown('normal');
    		 } 
    		  
    	 });
    	  
    	
    	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    	
    	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    	$('.accordionButton').mouseover(function() {
    		$(this).addClass('over');
    		
    	//ON MOUSEOUT REMOVE THE OVER CLASS
    	}).mouseout(function() {
    		$(this).removeClass('over');										
    	});
    	
    	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    	
    	
    	/********************************************************************************************************************
    	CLOSES ALL S ON PAGE LOAD
    	********************************************************************************************************************/	
    	$('.accordionContent').hide();
    
    });

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try adding this before the click event

    Code JavaScript:
        //SHOW THE FIRST ITEM ONLOAD
        $('.accordionButton:first').addClass('on').slideDown('normal');

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for the help. I've used your code but in a different part of the script to get it to work.
    In case anyone else is having problems with this here's what I got to work for me:

    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');
    		  
    		//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');
    			  
    			//OPEN THE SLIDE
    			$(this).next().slideDown('normal');
    		 } 
    		  
    	 });
    	  
    	
    	/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    	
    	//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    	$('.accordionButton').mouseover(function() {
    		$(this).addClass('over');
    		
    	//ON MOUSEOUT REMOVE THE OVER CLASS
    	}).mouseout(function() {
    		$(this).removeClass('over');										
    	});
    	
    	/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    	
    	
    	/********************************************************************************************************************
    	CLOSES ALL S ON PAGE LOAD
    	********************************************************************************************************************/	
    	$('.accordionContent').hide();
    	
    	//SHOW THE FIRST ITEM ONLOAD
        $('.accordionContent:first').slideDown('normal');
    });

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem


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
  •