icons: where should the arrows point in a folding accordion? Left / down … down / up?

I'm not sure there is a definitive answer yet. This is how I see the options.

Arrow conventions

The trees have used arrows pointing to the right for the closed and down arrows to open, which, as FreshCode mentions in its response, has been generalized to expanders. It is a reasonably well established convention, dating back to Vista for Windows and in the mid-1990s for Mac (where they were known as "little arrows").

I have worried that it may cause confusion. In other uses of arrows such as cascading menus, split menus, menu buttons and drop-down lists, the arrow suggests only a temporary display of some options, not the fixed opening of a complete panel that must be explicitly closed. Also in these other uses of the arrows, the direction of the arrow inevitably indicates the user's movement. get in activation On the contrary, in trees or expanders, the arrows pointing to the right cause a downward movement and the arrow pointing downward causes an upward movement. I have not witnessed this being a problem (for example, users think that the down arrow means "expanding further"), but I have not witnessed extensive use of the expander.

Window Control Agreements

Perhaps it would be better to use a down arrow to mean closed so that at least the direction of the arrow is consistent with the movement it creates and with its use in other controls. An open expander would have an "close" X icon, taking advantage of its use for Windows. However, users may think that "X" means Delete as in "delete all that entry that I just put in the expander", so users are afraid to close an expander.

Perhaps a more appropriate way to use window controls is to use the minimize and maximize icons for open and closed expanders, respectively. However, any use of window control conventions is probably more effective if the controls are on the right, as they are for Windows. This can induce an additional rotation of the mouse since the input controls tend to be justified to the left. In addition, I would worry that users confuse the expander controls with the window controls when the expander moves to the top of the window.

Other tree conventions

Using "+" to mean closed and "-" to mean open is an alternative seen in tree controls prior to Vista that avoids the contradiction of the directionality of the arrow. It seems to work fine, but, like most of the options I've covered so far, I've always wondered if some users are confused about whether the symbols are supposed to represent action the user is activated or activated state of the expander (assume that "-" means that the expander is closed, or at least not completely open).

Another one that is worth considering are the "touch" icons used by Java Swing.

Handle the pivots from horizontal to vertical to open them. Image of Java Look and Feel Guidelines.

For some reason, I feel they handle the action / state problem less ambiguously.

Toggle button

The usual way I recommend dealing with the action / status problem is to use toggle buttons as I described when responding. Should an icon show the current or next status? In this application it means that you use the same icon that means "open this" (I think the plus sign is less ambiguous) to both of them closed and open expanders, but the icon button has a high appearance for closed expanders and a depressed appearance for open expanders.

Didn't I mention any definitive answer?

With so many problems, I don't think we really know which one is the best without some user tests. It is completely possible that it does not make such a difference. If you finish the test, post your results here.

Navigation: sequential menu (deepen) or accordion

I have 3 levels in my information architecture for my desktop. In the vertical navigation that measures H: 500px W: 200px I have;

  • Top level: 8 items
  • Second level: 9 elements in total (one of my top level elements has 7 second levels)
  • Third level: 12 articles.

Would you use an accordion style (which will lengthen the menu when it expands) or a sequential search menu? and because?



quick start – SharePoint 2010 quciklaunch Accordion

I am trying to make the SharePoint site quickly start accordion using the following code. Everything works fine, but when I click on the plus sign as shown in the figure and then click on the submenu item that leads to the submenu page and the accordion is collapsing. I want the agreement not to collapse when I open the submenu item by highlighting the selected submenu item. Please find the photos and the code.

enter the description of the image here

<! -

enter the description of the image here

Design patterns: is it an accordion or not?

If you have a scenario where you have a card component that can be expanded and contracted independently of other cards

eg by expanding this card, other cards do not collapse.

Is it still an accordion or something else?

I'm asking this in the context of making a UI library

Which accordion identifiers work best?

Which accordion identifiers make the most sense?

  • more and less


  • gallons up and down arrow

I would be very interested to see if anyone has analysis or evidence on these concepts. As always, opinions are also welcome.

Accordion example

seo – Will Google index and assign keyword value to content in closed accordion sections?

It depends on you and you do not have to worry about leaving the accordion open or closed.

Let's say that the content is hidden for the user, the accordions use JavaScript to hide or show the content, as long as the javascript is accessible for Googlebot, it will not have any problem with its SEO, since Google can access the Javascript code and understand that you are using to hide the content and you can also analyze or read the hidden content of the source code.

You should check that the robots.txt file on your website is not blocking Google to understand that the hidden content is temporary. To go yourdomain.com/robots.txt and make sure that no folder or file containing the accordion javascript code is blocked as

User agent: *
Do not allow: / folder / accordion / javascript
Do not allow: / javascript

Interaction design – Use of accordion lists with radio buttons

I'm designing a UI for a pop-up window that would allow the user to share a publication with one class at a time and select which class. They should also be able to delve into each class and select all or certain students within each class to publish. (The default value would be to share all the students in the class).
I am currently using an accordion list of all the classes that are expanded to then select or deselect students, but each item in the list can also be selected with an option button. (see attached).
This seems wrong to me and is too complex an interaction, especially the fact that with the presence of the radio button, I would not have the ability to deselect all the students once expanded if I just wanted to publish a student.

Is there a better approach or standard for this problem in which someone can think?

enter the description of the image here

The role of the editor does not allow the page to load for Accordion

I'm using this add-on https://wordpress.org/plugins/responsive-accordion-and-collapse and admin users can edit accordions well. But someone with the role of editor can not edit or create new accordions, the browser keeps loading and I put the configuration file in debug mode and no error appears. Any idea why that is?

Do you know how to add an additional card to the accordion block of the Mobirise constructor?

I created a site with 10 pages in Mobirise bootstrap builder. Could you recommend me how to add one more card to the accordion block? I repeated the code of the block, but the card was placed in the middle of the block behind the rest of the content. Can you help me? Thanks in advance.

javascript – Accordion component with Angular 7

I have to make a "zippy" accordion component, respectively, using Angular 7.

I'm new to Angular. I just started with that a few weeks ago. But with a little use of Google I was able to implement the required function.

This is how it looks.

In collapsed state:

Closed accordion

In expanded state:

Open accordion

Here is the code that I wrote for the accordion component:

to import {
} from & # 39; @ angular / core & # 39 ;;
to import {
} & # 39; @ angular / platform-browser & # 39 ;;

selector: & # 39; zippy & # 39 ;,
templateUrl: & # 39; ./ zippy.component.html & # 39 ;,
styleUrls: ['./zippy.component.css']
The ZippyComponent export class implements OnInit {
Title @Input ();
isExpanded = false;
buttonCaption = "Expand";

builder () {}

ngOnInit () {}

onClickButton () {
this.isExpanded =! this.isExpanded;
this.buttonCaption = this.isExpanded? "Collapse": "Expand";
.envase {
Typographic family: Arial, Helvetica, sans-serif;
maximum width: 800px;
width: 100%;
margin: auto 2rem;
filling: 3rem 2rem;
edge: solid 1px # 555;
Edge radius: 6px;
text-align: left;
font size: 2rem;
bottom margin: 1rem;

nav {
screen: bending;
justify content: intermediate space;

.container a {
text-decoration: none;
filling: 0.4rem 0.6rem;
font size: 2rem;
color: # 555;

.container a: hover {
cursor: pointer;

principal {
filling: 0.25rem 1rem;
top margin: 3rem;
background color: #eee;
Edge radius: 6px;
font size: 1.4rem;

The code of & # 39; app.component.html & # 39;

Duo dolore sit et clita amet, aliquyam clita sed duo nonumy amet et et. Rebum amet lorem stet est.

Prose and your heavenly days. Parasites are not so in. Delphis, however, the friend of the launch cell captured the nickname, accompanied by a favor from Gild and.

Of quille inouies pieds blonds béni crépuscule les ravie fermentent, béhémots rutilements mer couleurs des de maries pénétra fortes folle. Je de devoros suivi de. Impassive liens to a papillon ..

More information on the subject of health in the world, in this place, we are here. Kleinem zu spät du dann ort ort. Nun der denkst gesellschaft.

The functionality works, but currently it only changes from collapsed to expanded at the same time. It would be great to have some animation or something similar when it changes. So that one has a "smooth" transition.

If anyone knows how to make the transition, I would love to read your answer.

All other suggestions, recommendations and criticisms about my implementation were also well received.