I don’t know if anyone else talked about this but wanted to see if there would be an adjustment when an element is collapsed.
Theory:
When an element is collapsed, then other elements above / below or on the side of the element would adjust accordingly and resize to fill in that void.
Great question
What you are describing can be very very useful for all sorts of interactive layouts. It is achievable, but you need to build your layout accordingly.
I’ll explain:
The easy thing to do, first off, is to use layout tools that use flexbox display, such as the Stack or the Layouter. In these components, when an element (or Layouter item) is collapsed and/or expanded, the rest will adjust accordingly. That is default behavior in a flexbox, and might be great for you in many cases.
In a grid, in general, elements do not affect each other’s position, as they are all docked in relation to the grid itself.
You can however make sure your grid is set in a way that is affected by its inner elements. For instance, if you set a row’s height to max-content, and then collapse an element that was within it, that row will now shrink to the next tallest element in the row, or shrink altogether. The rest of the grid will then be pulled up.
There can be more ways to achieve such effects, it really depends on what you’re going for. Fr, min-content, max-content and auto are all units that respond to the content within the grid.
Lastly - the page itself. This one’s easy as well. Collapse a section, and the rest of the page will adjust!
I hope this helps and was enough to set you off experimenting
Good luck, and we’re here if you have any more questions!
Just to clarify: You can of course have elements collapse or expand using Corvid! It really isn’t too hard and you can learn all about it in the Corvid API Reference
Thank you … I’m not the author of the original post, but was right about to ask how to achieve it. There is an interesting example of this at John Burke’s mobile site (johnburkemusic.com and I’d really like a similar menu.
Just an interesting question: can we animate the expansion/collapse action? (and if so, how? (if may i dare ask for your guidance here))
This is the place to ask such questions, so you’re more than welcome to of course!
I’m sorry to say that currently you cannot animate expand/collapse. Show/hide can be animated. Perhaps in some cases you could achieve an effect you’ll be happy with by both collapsing and hiding your element, and then having the trigger do both expand and show.
hi
didn’t see an araujoricardo nor another richard in the forum so… dunno if you meant to answer me v:
if so, sorry it took me so long to notice and answer back v:" but thank you.
i did study and practiced all i could understand about the collapse function and achieved something i’m not particularly happy with, but at least satisfied enough. Still, i do would like to see collapse animated available at the Corvid in a future.