Expandable animated menus

I needed a LOT of time to write this post, this time I'll show you how to create animated menu collapsing/expanding.
You are free to change anything of the code and animations.
You can change buttons in the examples below with any combinations of items you like for graphic.
It's a little complex, so I'll write a plugin to do this automatically and better.
The final result will be like this demo:

Please note the will need to do a lot of GROUPS. Here is the hierarchy of what we'll see, keep it in mind for the rest of this post:

First of all, create a button called main, then another button called +. Resize them to get this result:

Now put this code in button + script:

on mouseUp
   if the label of me is "+" then
      showMe
      set the label of me to "-"
   else
      hideMe
      set the label of me to "+"
   end if
end mouseUp



Group them together and call the group Main.
Create another button call it slider, resize it below Main like this:

Now group slider with itself (or other item you like in slider), and call the group Slider.
Now group group slider with group main, call this group element 1.
Set the lockLocation of group "element 1" to true.
Put this code in group element 1:

on showMe
   repeat while the top of group "Slider" of me < the bottom of group "Main" me - 4
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" me + 4
      set the height of me to the height of me + 4
      layoutChanged the short name of me, 4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end showMe

on hideMe
   repeat while the bottom of group "Slider" of me > the bottom of group "Main" of me
      lock screen
      set the bottom of group "Slider" of me to the bottom of group "Slider" of me - 4
      set the height of me to the height of me - 4
      layoutChanged the short name of me, -4
      unlock screen
      wait 10 milliseconds with messages
   end repeat
end hideMe



Clone it has many times you like, for example 5 times.
Put any clone below the preceding clone, change the numbers in names, so we have: element 1 on top, element 2 down element 1, element 3 down element 2 and so on.
Group all and call it List.
Set the lockLocation of group "list" to true.
Put this code in group list script:

on layoutChanged pGroup, pSize
   lock messages
   
   local tElementCount
   
   if pGroup is "Element Template" then exit layoutChanged
   
   put word 2 of pGroup into tElementCount
   add 1 to tElementCount -- look for the next one
   repeat while there is a group ("Element" && tElementCount)   
      set the top of group ("Element" && tElementCount) to the top of group ("ElemenT" && tElementCount) + pSize--
      add 1 to tElementCount
   end repeat
   set the vscroll of me to the vscroll of me
   
   if the bottom of group pGroup of me > the bottom of me then
      set the scroll of me to the scroll of me + pSize
   end if
   set the vScrollBar of group "List" to the formattedHeight of group "List" > the height of group "List"
   set the vScroll of group "List" to the vScroll of group "List"
   unlock messages
end layoutChanged



FINISHED!!!