Results 1 to 3 of 3

Thread: Horizontal Accordion with Preview Width

  1. #1
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal Accordion with Preview Width

    1) Script Title: Horizontal Accordion script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...haccordion.htm

    3) Describe problem: Can you please help me figure out how I can have the list of three widths (preview, peek, full) vs. the two widths it has now (peek, full). I would like it to load with the preview width, expand to full width on mousenter while peeking the rest of the list, and then the entire list return to preview state on mouseleave.

    Thank you in advance. I find your script to be very versatile and well documented, I am just new at this still.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure, try the below modified .js file. Then inside your initialization code, add a "previeww" option that specifies the "preview" width.

    Code:
    haccordion.setup({
    	accordionid: 'hc1', //main accordion div id
    	paneldimensions: {peekw:'50px', previeww:'100px', fullw:'400px', h:'158px'},
    	selectedli: [0, true], //[selectedli_index, persiststate_bool]
    	collapsecurrent: true //<- No comma following very last setting!
    })
    DD Admin

  3. #3
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That works great. Thank you.

    I am sure this has been answered elsewhere, but I couldn't find it while searching the forums. What is the easiest way to add a delay to the expand animation? I know I can slow the animation effect, but I want it to actually wait a couple seconds to expand. I have tried delay() and setTimeout(), but to no avail so far.

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
  •