Accordion Interaction

23 Jan 2009 - 12:58pm
5 years ago
12 replies
2199 reads
jorge.marquezm
2008

Hi everyone!

Does any one have some good samples of expandable/collapsible content pane
interaction (accordion)?

Something like this http://ui.jquery.com/demos/accordion but applyed on real
website.

Cheers!

Jorge

--
Échale un vistazo a mi blog www.usandolo.com

Comments

23 Jan 2009 - 4:38pm
SemanticWill
2007

Sure -

This is for a person's personal portfolio website - it's clean, and
makes a relatively elegant use of jquery according to get the effect
you are thinking about:
On the right side - there are projects, like on one, and you get the
accordion, and then portfolio samples. I like it so much, thinking
about ripping the idea off for my own portfolio:

http://www.jkarch.at/

*And it uses jQuery - to implement :-)

~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

--------------------------------------------------------------------------------
Will Evans | User Experience Architect
tel: +1.617.281.1281 | will at semanticfoundry.com
http://blog.semanticfoundry.com
aim: semanticwill
gtalk: semanticwill
twitter: semanticwill
--------------------------------------------------------------------------------

On Jan 23, 2009, at 12:58 PM, Jorge Márquez wrote:

> Hi everyone!
>
> Does any one have some good samples of expandable/collapsible
> content pane
> interaction (accordion)?
>
> Something like this http://ui.jquery.com/demos/accordion but applyed
> on real
> website.
>
> Cheers!
>
> Jorge
>
> --
> Échale un vistazo a mi blog www.usandolo.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

23 Jan 2009 - 4:45pm
mcaskey
2008

Accordions can be a fun way to provide access to many similar features
or bits of info in a tight space.

One pitfall to watch out for, is the function of the height and behavior
of the accordion. If the content of a pane is taller than the space the
accordion rests in, you sometimes end up scrolling up and down the page
to read content, activate another accordion, read some more, etc...
classic pogo.

Here's a nested accordion which is activated with a click event.
http://www.sonlight.com/samples.html

Apple has one on their site too, which is activated by a hover event.

-Mike C.

Jorge Márquez wrote:
> Hi everyone!
>
> Does any one have some good samples of expandable/collapsible content pane
> interaction (accordion)?
>
> Something like this http://ui.jquery.com/demos/accordion but applyed on real
> website.
>
> Cheers!
>
> Jorge
>
>

23 Jan 2009 - 4:47pm
SemanticWill
2007

@yoni just reminded me that you should refer to the interaction design
pattern as well -

Accordion Design Pattern:

http://www.welie.com/patterns/showPattern.php?patternID=accordion

~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

--------------------------------------------------------------------------------
Will Evans | User Experience Architect
tel: +1.617.281.1281 | will at semanticfoundry.com
http://blog.semanticfoundry.com
aim: semanticwill
gtalk: semanticwill
twitter: semanticwill
--------------------------------------------------------------------------------

On Jan 23, 2009, at 4:38 PM, Will Evans wrote:

> Sure -
>
> This is for a person's personal portfolio website - it's clean, and
> makes a relatively elegant use of jquery according to get the effect
> you are thinking about:
> On the right side - there are projects, like on one, and you get the
> accordion, and then portfolio samples. I like it so much, thinking
> about ripping the idea off for my own portfolio:
>
>
> http://www.jkarch.at/
>
> *And it uses jQuery - to implement :-)
>
> ~ will
>
> "Where you innovate, how you innovate,
> and what you innovate are design problems"
>
> --------------------------------------------------------------------------------
> Will Evans | User Experience Architect
> tel: +1.617.281.1281 | will at semanticfoundry.com
> http://blog.semanticfoundry.com
> aim: semanticwill
> gtalk: semanticwill
> twitter: semanticwill
> --------------------------------------------------------------------------------
>
>
>
> On Jan 23, 2009, at 12:58 PM, Jorge Márquez wrote:
>
>> Hi everyone!
>>
>> Does any one have some good samples of expandable/collapsible
>> content pane
>> interaction (accordion)?
>>
>> Something like this http://ui.jquery.com/demos/accordion but
>> applyed on real
>> website.
>>
>> Cheers!
>>
>> Jorge
>>
>> --
>> Échale un vistazo a mi blog www.usandolo.com
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> Unsubscribe ................ http://www.ixda.org/unsubscribe
>> List Guidelines ............ http://www.ixda.org/guidelines
>> List Help .................. http://www.ixda.org/help
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

23 Jan 2009 - 4:47pm
llschertler
2008

Albeit somewhat boring and not the most attractive design, I created
the IA for this government website, which includes an accordion menu:

http://www.hospitalcompare.hhs.gov/Hospital/Search/SearchMethod.asp?pagelist=Home&dest=NAV|Home|Search|SearchMethod|Welcome&search_dest=NAV|Home|Search|Welcome&version=default&browser=Firefox|3|WinXP&language=English&btnFindHosp=Find+and+Compare+Hospitals

On Fri, Jan 23, 2009 at 12:58 PM, <Jorge at otto.dreamhost.com> wrote:
> Hi everyone!
>
> Does any one have some good samples of expandable/collapsible content pane
> interaction (accordion)?
>
> Something like this http://ui.jquery.com/demos/accordion but applyed on real
> website.
>
> Cheers!
>
> Jorge
>
> --
> Échale un vistazo a mi blog www.usandolo.com
>
>
> ________________________________________________________________
> Reply to this thread at ixda.org
> http://www.ixda.org/discuss?post=37559
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
Thanks,

Laura L. Schertler

24 Jan 2009 - 3:57pm
Andy Polaine
2008

Tomato's web site uses it too: http://www.tomato.co.uk

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=37559

24 Jan 2009 - 4:23pm
mcaskey
2008

It's a very interesting approach to solving the issue of pogoing... it
works. It's really smooth too, as long as you didn't click something 30
lines down and hope to then click something 10 lines up... then you're going
from scan+click, to scan+scroll+scan+click.

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Andy
Polaine
Sent: Saturday, January 24, 2009 12:57 PM
To: discuss at ixda.org
Subject: Re: [IxDA Discuss] Accordion Interaction

Tomato's web site uses it too: http://www.tomato.co.uk

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=37559

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

1 Feb 2009 - 10:50pm
Sara Durning
2009

Here's a couple of examples ...

A lightweight accordion that is built with scriptaculous and works
properly in every browser:
http://www.aughenbaugh.us/accordion2/Index.html

This example is vertical and used to navigate the site:
http://www.gallery.ca/caught/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=37559

2 Feb 2009 - 1:49pm
Angel Marquez
2008

I've always wanted to use the vertical:
http://demos111.mootools.net/Fx.Elements

On Sun, Feb 1, 2009 at 7:50 PM, Sara Durning <sdurning at hotmail.com> wrote:

> Here's a couple of examples ...
>
> A lightweight accordion that is built with scriptaculous and works
> properly in every browser:
> http://www.aughenbaugh.us/accordion2/Index.html
>
> This example is vertical and used to navigate the site:
> http://www.gallery.ca/caught/
>
>
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=37559
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

24 Mar 2009 - 5:14pm
Christian Crumlish
2006

As promised a month or so ago, I've put together a survey about the
accordion user interface element to help inform a design pattern I'm
writing.

If you have opinions about what makes an accordion an accordion (and
whether it's really anything different from stacked panels or a
reskinned tab interface or a tree widget), please come by and share
your thoughts.

The questionnaire is here:
<http://www.surveymonkey.com/s.aspx?sm=lGHKygw2YwMI8yoom00Tzg_3d_3d>

...and my blog post about it is here:
<http://yuiblog.com/blog/2009/03/23/survey-when-is-an-accordion-not-an-accordion/>

(hoping those links don't break)

Thanks!

-xian-

--
Christian Crumlish
I'm writing a book so please forgive any lag
http://designingsocialinterfaces.com

25 Mar 2009 - 7:08am
pyces
2007

Your survey appears to be closed. The main difference between an
accordion and closable/collapsible panels is that with an accordion only
one panel's contents are visible at a time, thus if you open another
panel, the first panel closes, whereas in closable/collapsible, you can
view as many panels as you'd like at one time. If you open another
panel, it opens but the first panel also stays open. Check out
www.welie.com. I found his site very helpful when creating our design
pattern library.

Courtney

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Christian Crumlish
Sent: Tuesday, March 24, 2009 6:14 PM
Cc: discuss at ixda.org
Subject: Re: [IxDA Discuss] Accordion Interaction

As promised a month or so ago, I've put together a survey about the
accordion user interface element to help inform a design pattern I'm
writing.

If you have opinions about what makes an accordion an accordion (and
whether it's really anything different from stacked panels or a
reskinned tab interface or a tree widget), please come by and share
your thoughts.

The questionnaire is here:
<http://www.surveymonkey.com/s.aspx?sm=lGHKygw2YwMI8yoom00Tzg_3d_3d>

...and my blog post about it is here:
<http://yuiblog.com/blog/2009/03/23/survey-when-is-an-accordion-not-an-a
ccordion/>

(hoping those links don't break)

Thanks!

-xian-

--
Christian Crumlish
I'm writing a book so please forgive any lag
http://designingsocialinterfaces.com
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

25 Mar 2009 - 9:04am
Christian Crumlish
2006

thanks. not sure how the survey got closed prematurely (it is supposed
to stay open to april 30, so i'll check that and re-open it).

you are addressing most of the key questions, though (and Welie is one
of the first sources I consulted when starting work on our pattern).

-x-

On Wed, Mar 25, 2009 at 5:08 AM, Jordan, Courtney <CJordan at bbandt.com> wrote:
> Your survey appears to be closed. The main difference between an
> accordion and closable/collapsible panels is that with an accordion only
> one panel's contents are visible at a time, thus if you open another
> panel, the first panel closes, whereas in closable/collapsible, you can
> view as many panels as you'd like at one time. If you open another
> panel, it opens but the first panel also stays open. Check out
> www.welie.com. I found his site very helpful when creating our design
> pattern library.
>
> Courtney
>
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
> Christian Crumlish
> Sent: Tuesday, March 24, 2009 6:14 PM
> Cc: discuss at ixda.org
> Subject: Re: [IxDA Discuss] Accordion Interaction
>
> As promised a month or so ago, I've put together a survey about the
> accordion user interface element to help inform a design pattern I'm
> writing.
>
> If you have opinions about what makes an accordion an accordion (and
> whether it's really anything different from stacked panels or a
> reskinned tab interface or a tree widget), please come by and share
> your thoughts.
>
> The questionnaire is here:
> <http://www.surveymonkey.com/s.aspx?sm=lGHKygw2YwMI8yoom00Tzg_3d_3d>
>
> ...and my blog post about it is here:
> <http://yuiblog.com/blog/2009/03/23/survey-when-is-an-accordion-not-an-a
> ccordion/>
>
> (hoping those links don't break)
>
> Thanks!
>
> -xian-
>
> --
> Christian Crumlish
> I'm writing a book so please forgive any lag
> http://designingsocialinterfaces.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>
>
>

--
Christian Crumlish
I'm writing a book so please forgive any lag
http://designingsocialinterfaces.com

25 Mar 2009 - 9:20am
Christian Crumlish
2006

Aha, free SurveyMonkey accounts max out at 100 respondents. Just
upgraded, so please try again!

-x-

On Wed, Mar 25, 2009 at 7:04 AM, Christian Crumlish <xian at pobox.com> wrote:
> thanks. not sure how the survey got closed prematurely (it is supposed
> to stay open to april 30, so i'll check that and re-open it).

Syndicate content Get the feed