This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Angie Carrier
Posted Dec 04 - Read on Facebook

Hi all - I did a search, but couldn't find an answer. I need to make a quick tree diagram that allows the user to collapse/expand sections (similar to a folder structure with collapse/expand arrows on the left). Any thoughts on how to best approach this?

10 Comments

Trevor Coleman

[In this answer, I'm assuming you want to have multiple sections one on top of another, where opening one moves all the other sections below it down]

Create an array that stores an object with the following properties for each group of expandable items:
• Layer (layer should be a parent that contains the whole collapsible group as children)
• Position (order from the top down: 0, 1, 2, 3, 4, etc.)
• Expanded Height (in pixels)
• Collapsed height [optional]
• Currently Expanded (boolean)

The you'd create an updatePositions function, which would look like this:

for each object in the array:
for each layer above this layer (lower position #)
if layer is expanded, add expanded height to newYPosition
if layer is collapsed, add collapsed height to newYposition
animate to newYPosition

Trevor Coleman

To expand collaps the group itself, the best thing to do is just put all the collapsing bits into an array, and then iterate over the array to add a "collapsed" state to each one.

(using "•" for tabs)

for layer in bodyRowsArray
• layer.states.collapsed =
• • y: rowHeight
• • height: 0
• layer.animationOptions =
• • time: 0.3

Then in the event handler just iterate over them:
headerRow.onClick ->
• for layer in bodyRowsArray
• • layer.states.next()

Trevor Coleman

here's a single expand, collapse group: http://share.framerjs.com/6g7anjmqlt1e/

Angie Carrier

This is so great - yes, you assumed correctly. Thank you SO MUCH. I'm currently finishing up the layers in Sketch, but I can't wait to try this out - I wasn't even sure where to start

Angie Carrier

Do you have any suggestions when I need to use specific rows (as in, I can't build them with the app, they have to come from Sketch)? Here's an example of the start. I've tried a bunch of different ways of getting each section to collapse/expand smoothly, but I can't think of a way that won't use 100s of lines of code.

I know, in theory, how it should work, but I'm not sure how to implement it. Since each triangle is tri_#, I can target anything with a tri_# to collapse/expand the children underneath onClick. The rows underneath can be targeted the same way since they are all row_#. I'm just not sure how to get them into an array, properly expand/collapse the sections, or if I even formatted the layers correctly. I finished organizing it and I'm not sure if I did myself more harm than good. Any suggestions are welcome!
http://share.framerjs.com/0iwj4bfrtmww/

Trevor Coleman

Lemme get to a computer and I'll take a look.

Angie Carrier

Thank you! I updated the link. I realized the layers were pretty screwed up (and maybe still are, ha)

Trevor Coleman

ok this will take some work. back in a bit

Angie Carrier

Thank you! Don't kill yourself, I'm sure there's an easier way to do it that I can't figure out than what I even have started. Even small suggestions will be helpful.

Trevor Coleman

Well, I started looking at it, and I'm about halfway in to writing a custom class to do it. So to handle a multiple row, nested tree is reall something quite difficult.

Does the entire tree need to be interactive? Often when I have something like this, I will animate a single row, or section so that I can get the point across without having to build a multi-row, nested tree thing.

Read the entire post on Facebook