User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm sketching out an interface in which links, which clicked, reveal a group of configuration options for that item. (slides down, accordion style)

One element in that group of the configuration controls is a dropdown selector.

Writing up the notes, I want to refer to the dropdown selector and at the same time to the group of configuration options that... well... drop down.

All this talk of dropdowns is confusing.

How can I refer to the content that is revealed below without calling it a dropdown?

enter image description here

The green rectangle is the group of configuration options that I need to name.

share|improve this question
Can you post a scan of that sketch? – dnbrv Mar 16 '12 at 17:47
+1 for a good question! I'll answer it when not on mobile device – Benny Skogberg Mar 16 '12 at 17:48
Vertical accordion or down slider? – Mervin Johnsingh Mar 16 '12 at 17:49
How do you need to refer to it? I would just say "click to expand"... and internally you can call it an Acordian. – Ben Brocka Mar 16 '12 at 18:15
What's not "actual accordian" about it? They can be vertical too – Ben Brocka Mar 16 '12 at 21:53

10 Answers 10

up vote 4 down vote accepted

It doesn't matter what you call them. As long as you are consistent with the terminology and your entire team structure agrees on the term.

In the past I've seen terms like 'expandos', 'show/hide', 'expandable panels'

share|improve this answer
Expando! I like it! :) – dennislees Mar 16 '12 at 21:39
@dennislees: Expando is the name some Argentinian developer gave to his version of accordion, not the content within it. – dnbrv Mar 16 '12 at 23:24
I've never heard Expando sounds like a knockoff version of Mr. Fantastic. But I agree these work, I mash them together and call them 'hidden panels'. – DasBeasto Sep 14 '15 at 13:13

A fairly standard term for this UI element is an Accordion Slider or simply an Accordion.

References: JQuery, MooTools, YUI.

share|improve this answer
Though note that accordions usually consist of multiple sections stacked vertically where only one is open at a time. (Again, no rules on any of this, but just be sure the entire team uses the same terminology so everyone is on the same page) – DA01 Mar 16 '12 at 21:33
@DA01 Right. I presumed from the screenshot that this was the desired functionality. – ghoppe Mar 16 '12 at 21:41
oh. ha! Yea, I guess you are right. The screen shot could go either way. If the entire green area is the drop down, then definitely that's an accordion. If it's the widget that looks like a SELECT input, that's maybe something else. – DA01 Mar 16 '12 at 22:24
@DA01 Right! I interpreted the diagram to be pointing at the selection drop down (called drop down in black) and the green accordion pane (calling it a drop down in green) and thus the reason for the question to disambiguate. ;) – ghoppe Mar 16 '12 at 23:15

In reports when these things aren't clear I include an annotated 'naming' diagram in the report.

share|improve this answer

There're no special terms for the content of most UI controls. The content of the regular drop-down box is called simply the list of options.

The most similar control to your situation is accordion, which means a group of items stacked vertically that show some information associated with the clicked item directly under it. Accordion, in turn, is a variation of a tab. "The stuff that is revealed" in both of them is called simply content.

Since what your application shows is a group of controls, the word "content" might not describe it properly. Thus, you may adopt some proprietary name, such as "licensing options". The key, as DA01 has said, is to make sure that everyone on the team agrees with it and that any new staff will understand what you're talking about without prolonged explanations.

share|improve this answer

I prefer the term "reveal", from stagecraft.

As in, "after the user selects this option, the reveal is that list of options."

share|improve this answer

Label it in a diagram as whatever you want.

The easiest thing to call it is the HTML name: "select" or a bit better phrased--"selection box". And you call the options as "options".

Or you can mix and match. "dropdown"+"options";"selectionbox"+"dropdowns". Anything. As long as both aren't the same, and you're comsistent, the user will understand what it is. You can call it "cookie jar"+"cookies" and the user will understand. Even if you don't have a labelled diagram. Humans are like that; learning from context is ine of our better abilities.

share|improve this answer
I've edited @dennislees's question to remove some ambiguity about what needs to named. – dnbrv Mar 17 '12 at 17:28

I am not exactly sure why you want to rename a drop down something else. I guess you might your aesthetic reasons or you just want to provide a unique name to the pattern you have devised but I am more concerned about the scope of it confusing people.

We already use a lot of very interesting terminologies to describe design patterns (when I first heard the term accordion,I was like eh..what is that ?) and having a new name for something that's essentially a drop down might confuse your audience since they would still associate the functionality of it being similar to a dropdown or accordion in your case.

I know this is not the answer you were looking for but I am just talking from the perspective of you trying to explain this to a client or a developer.The conversation might be something like this:

You : So,I want to implement this expandomatrix accordion

Client : eh...say that again ?

share|improve this answer
I've edited @dennislees's question to remove some ambiguity about what needs to named. – dnbrv Mar 17 '12 at 17:28

I've seen this referred to as a list inlay. In your case it's more of a detail inlay, but they're similar.

share|improve this answer

Sometimes its more helpful to name a control after what it's main purpose is than what it might actually look like. So, from your sketch, you can call the dropdown control a 'Quantity Selector', so its contents might then be referred to as 'the Quantity Selector items'.

Or, for the whole box of UI components, this could be referred to as the 'License Type Options' selector.

So, in your notes you could say: "Choose the required license quantity from one of the items listed in the 'Quantity Selector' menu found within the 'License Type Options' panel." Perhaps this isn't all that elegant, but it should be clear enough.

share|improve this answer

why cant you name like that of Google's menu bar "More" for the extended configuration option?, it meets standard and would reveal to users that their are more options..

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.