How can I get Accordian to move a panel to the top of the page when opened?
Hi there @dcsillag and welcome to the community!
I think, if I’m interpreting your question correctly, is that you’re wondering if the page scrolls so that the opened item is at the top of the browser. Is this correct? If so, that is not something the Accordion stack does. Accordion is based off of the Bootstrap Collapse component and that is not how that component works.
Thank you for the welcome. You understood the question correctly. I understand the answer, but it’s disappointing. It’s not user-friendly to keep losing your place on screen when opening a new pane. I have seen other accordions that do move the pane to the top of the window so I was hoping there was a solution.
The simple answer is to use one of the other accordion products if that’s what you really need.
In general the use of an accordion is to hide a modest amount of information. As such the whole scrolling to top, or losing one’s place, is not an issue. But, yes, if you use an accordion to install a decent amount of information then essentially you are using it to solve a problem it was not intended to solve.
Aside from living with things as they are, or buying another accordion stack, an alternative might be the wonderful Vertical Tabs stack within the Foundry family. This stack is intended to hold a good amount of information and does have a way to control scrolling to top. This stack may not suit your particular requirements but it’s wonderful and worth a look.
2 Likes
Thank you for the suggestion. Vertical Tabs won’t work well for this particular content, but the “Scroll upwards on click” is awesome and exactly what I’m looking for from the Accordion.
Hi, accordions are an excellent way to display a modest amount of content separated into different containers, as mentioned above. But they are not a one size fits all kinda thing.
Even with the float to top option accordions often fall over in use on a small (mobile phone) screen.
So, if you can tell us a bit more about what you wish to display and how you’d like to compartmentalize it, we may be able to suggest alternatives.
1 Like
Thank you for the input. I’m displaying a contract similar to this one. It works well on all devices.
http://nabetcwa54.org/contract.html
Hmmm, interesting one. Assuming this is something that someone is going to have to have agreed to before engaging you, or someone else, I’d suggest an accordion is definitely not the way to go, as it could easily be argued that not all the terms were visible thus making the contract void.
For something like this you’d be far better off just using regular flowing text, inside a print stack, so the person reading it can easily print it out for reference.
If you really wanted to compartmentalize it, the aforementioned Vert Tab stack would be my option. Sorry I can’t be much more help than that.
1 Like
Thank you for your thoughts. Users need to have quick access to the section(s) they are looking for. The problem with vertical tabs is they all rise to the top on mobile, causing too much scrolling when you want to move between sections. An accordion like the one shown is definitely the solution, but it needs to float to the top after expanding.
Another option is to use either the Modal or Mega Modal stacks. Then you can structure the links to the modals however you want: buttons or images. The content pops up. When someone escapes the modal they automatically see the full array of buttons, etc. Given you have so much content in each accordion that might be the better solution within the Foundry world for viewing via a phone.
2 Likes