SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need help with my horizontal accordion

    Hi folks, I have been reading through the "jQuery Novice to Ninja" book and I want to modify the accordion to be horizontal.

    I need to recreate the following effect: http://www.ascensionlatorre.com/the-team

    When a team member is clicked it slides open, then when another is clicked the open one closes and the new one opens.
    Currently I have it so they all open.

    Code:
    $("#team > aside").hide();
    $("#team > aside:first").show();
    $("#team > figure").bind('click', function() {
    $(this).next().animate({'width': 'toggle'}, 'slow', 'linear');		
    });
    Also any one any idea's how to get the scroll working? I have tried several carousels but the dynamic with of the content seems to ruin everything.

    Thanks in advance.

  2. #2
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you say an accordion is the right way to go on this?

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right guys, decided not to go the accordion route.

    I am using the "Bouncy Content Panes" but horizontally.

    However when the page loads the last pane starts open, how can I stop this?

    My code (simplified):
    Code:
    $('#bio > aside').hide();
      
      	$('#bio > figure').click(function() {
        	$(this).next().animate( 
    	    	{'width':'toggle'}, 'slow', 'swing');
      	});
    HTML Code:
    <div id="bio">
    <figure><img src=""</figure>
    <aside><p>bio goes here</p></aside>
    </div>
    Anyone??


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
  •