I like using the Accordion component for displaying a lot of content in a compact area. After watching some users unfamiliar with them browse a site that has them, I’ve noticed that until they are familiar with them, they don’t realize they can click to expand/contract them.
I spent some time looking at sites to see how they implement them for ideas on making sure visitors see all the content. I’ve noticed that a number of implementations allow for the icon displayed to change depending on the current state. This allows the use of +/- or down/up chevrons. I really like this approach.
Any plans to include the ability to select separate icons for the two states (open/closed)?
The Accordion stack is derived from the Collapse component in Bootstrap v4. The feature you’re referring to isn’t something that is a part of that component at this time. I could likely re-write some of the component to make this possible, but I will admit that particular feature isn’t currently on my todo list or a top priority right this moment. If you need that functionality you might look at the Ivy 2 stack as it has the functionality you’re referring to.
Hi @elixirgraphics I think this is a very important interface improvement for the Accordion. As much as I would buy any stack from you, I would like to stick to the Foundry stacks as much as possible. So: can I buy the stack and you notch it up the priority list?
I think this is a very important interface improvement for the Accordion.
I’m not sure I’m at the point where I think it is important. The Accordion stack has the ability to add an icon to each individual Accordion item. This means you can set the same icon for each of them (a plus sign, a chevron, etc), or have totally different icons for each. With hundreds of icons in the stack it shouldn’t be too hard to find something.
Once the user clicks the Accordion item, it opens. At that point you have done your job. You’ve hidden the content to clean up the page, and gotten the user to open it either via your label or the icon, or both. Whether they choose to close the Accordion item or not that isn’t as much a worry.
Just as you want to use Foundry-base stacks I want to keep some of the Bootstrap code as intact as possible, otherwise I’m writing my own version of Bootstrap from the ground up.
It isn’t to say that this won’t make it to Foundry at some point. It just isn’t a high priority at this point since the stack does its job currently.
Addendum: I have added it to the internal issues and feature requests tracker.
Depending on your website and user base the Ivy stack has an important additional feature that is really useful: the ability to “open all at once”. It drives some folks crazy to have to click on a lot of accordion items, and for them having that “open all at once” option is very nice.
I revisited this request, the one for a different icon for open and closed Accordion Items again today. I’d looked at this briefly when the topic first arose, and then looked at it again today in more depth.
Bootstrap does not provide for icons in their Collapse component at all. I’ve added an icon to the Accordion Items myself in the label. Since the Accordion stack is based off of the Bootstrap Collapse component it has no way to toggling between icons when the items are opened or closed. To get around this I’d be re-writing a lot of the Collapse code, and deviating from the Bootstrap code. With that amount of work and re-writing of the Collapse component I’d be better of just writing a different stack altogether.
I think the Accordion stack is solid as-is currently. If changing icons based on the item’s open / closed state is something you need for a project though stacks like Ivy work great with Foundry and provide this exact feature.
Adam: Thanks for the update. I’m currently using Ivy on one website. It’s “open all” feature proved to be crucial in that case. But I agree that the Accordion within Foundry is very nice and I plan on using it a lot in future projects.
