Worth mentioning DO NOT group items when using this feature. All went well for me while following this tutorial, but when I grouped the boxes below the accordion that were supposed to be pushed dows, everything stopped working. Go figure... BIG thanks for the tutorials, it`s been super helpful for a beginner like me! :)
First off these videos are amazing! Thank you for putting them together. I was playing around with accordions and everything was going well until I tried to have the accordion content slide up when I collapsed the header as opposed to just disappearing. I also wanted the header to stay static. In the video the entire header animates up and down which feels off. Things got interesting from that point on. After much trial and error I found I was able to achieve this through show/hide instead of set panel state. Here's what I did; - Create a box for the accordion header with the header text - Create a box for the content of the accordion with desired content (lorem ipsum in this case) - Convert the content box into a dynamic panel (don't' need to add any additional states) - Add interaction to the header box to show hide the content box dynamic panel on click with these settings: - - Target = content-box - - Type = Toggle - - Animate show = slide down, 500, linear - - Animate hide = slide up, 500, linear - - More options = push/pull widgets, below, linear, 500 Do that and you've got accordions that slide up and down while the header stays static. It also pushes/pulls the widgets below it. As a cheery on top you can group the entire thing and copy and paste to make each of your accordians.
Great solution Aaron! Thanks for sharing. You can even simplify it a bit by not converting a content box to a dynamic panel, since we do not creating any states.
I have tested this out without using hotspots on top of the dynamic panels and it works perfectly fine. Did click or tap interaction on the dynamic panel itself and switching panel's state to "next" with wrapping from last to first. That's it ))
Thank you for this video. I tried using the Push/Pull Widgets option once, and it didn't work as expected. Do you have to define a lock position for those elements you do not want to push/pull? For instance, if you had a left nav bar on the screen, when you use Push/Pull Widget option, will it not move everything below the accordion down? I think that's what happened when I tried it. How do you prevent some things from pushing/pulling and only affect certain elements that you do want to push/pull?
Great Tutorial, could not find any other straightforward solution for this issue. I did try to add another level and that caused some behavior issues. Any idea if this should work with another expend level? Thanks! Was able to solve this by creating a 2nd level menu item that behaves the same as the top level, but without creating another Dynamic panel.
I am using the latest version of RP 9 (9.0.0.3687) and it already have a pre-made widget "Accordion". If lo-fi prototyping, it should save a lot of time.
Thank you so much for these videos, they are amazing. My question is this: I want the user to see the particular contents of an accordion, and want to load a page with an accordion in an open state. When I do that, it does not move the next page buttons out of the way automatically, but rather shows them in the middle of the accordion. Thank you for your help.
Hey, how are you making it open? I'd suggest to add the opening behaviour to "onpageloaded" interaction and once the page loaded open it, push the widgets etc. just like in the video, in that case it should push all the stuff below. Let me know if it works
Hi, I just did what you taught. Everything is perfect except last logic--only one drop. I set up default to each dynamic panel but once a accordion drops, then another one drops, the distance between them will be larger and larger. Do u know why?
Hey, depends how you set it up, might need to add reset of coordinates. Or you might want to use push and pull option. I think its in the newer video in the playlist, look for push/pull
Please anyone who can was successfully able to replicate the last part of the video where the accordion worked without creating spaces between each of the items upon clicking should help.
@@vaexperience What are my to set the coordinates to? Attached is a link to a 24 sec video of the issue: www.loom.com/share/3edea464743d489e9a2a0db6261d1049
Look at the video and track the steps: 1) you opened an item and pushed the below elements to new cordinates. 2) you opened another item and pushed the elements that lay in the bottom to new cordinates. But did you return the step 1 items back to where they should be? that's the reset you need. If you action something, make sure that those actions are cancelled fully when you action something else
I wish you would drop the background music, for me it adds no value to what you are teaching and creates a distraction. Basic UX tenet, if it doesn't add value, lose it because it could be consuming cognitive resources. It's a suggestion.
Hi! I did it like you and then tried to apply interactions in another way and both resulted in the same bug/issue. I don't know why is this happening all the time. My first accordion creates an empty space every time it is hidden when I clicked on other accordions. The same happened when I clicked on the first when the second was open. I don't expect it but If you would be able to check it, here is the link: bit.ly/2KlLD8f. Anyway, I will try to fix this somehow. Thank you a lot for your tutorials! It is awesome content, nicely explained! Cheers!
Hey, interesting challenge. I went through your RP file - I think the issue is that you missed push/pull on all acc items when setting them to default/expanded. Because your first acc item expands and pushes the 2nd and 3rd down you need to tell it to pull when expanding the 2nd and collapsing the first. hope it makes sense. Just tick the push/pull on all of them :)
@@vaexperience Hey, thank you for helping me out! Unfortunately, didn't work out. It crushes along the way... I think it is kind of bug in Axure for Windows. It is the second time when I add a little bit more complexity to prototypes and it brokes. I tried to solve it in two different approaches but still the same issue. I think it is time to move on ;)
@@vaexperience I'm wondering if you could share this one particular RP file with your solution with me? I would like to see if this issue appears regardless of the file.
Hey drop me an email (in about tab) and i can share it. I'm also combining all the patterns from videos into an axure resource which will be done shortly, time allowing of course.
Loving the videos VA, thanks! - Can I sugest an improvement to the accorion: bd7epi.axshare.com/#id=i50m8g It uses change shape size instead of panel state change, and it's a bit smoother
@@vaexperience Making videos is hard! But I managed it. Hopefully it's clear enough? ruclips.net/video/BS0pAO9ey84/видео.html Source file: www.dropbox.com/s/pt4hd99i88i1iui/Accordion.rp?dl=0
Worth mentioning DO NOT group items when using this feature. All went well for me while following this tutorial, but when I grouped the boxes below the accordion that were supposed to be pushed dows, everything stopped working. Go figure...
BIG thanks for the tutorials, it`s been super helpful for a beginner like me! :)
Great point! Glad it's helpful
you have no idea how helpful these tutorials are !!!! so glad since axure program is lacking tutorials
Glad it's useful! And yes I agree, it took me years to discover nitty gritty ways to make prototypes awesome. Stay tuned for more
First off these videos are amazing! Thank you for putting them together.
I was playing around with accordions and everything was going well until I tried to have the accordion content slide up when I collapsed the header as opposed to just disappearing. I also wanted the header to stay static. In the video the entire header animates up and down which feels off. Things got interesting from that point on.
After much trial and error I found I was able to achieve this through show/hide instead of set panel state. Here's what I did;
- Create a box for the accordion header with the header text
- Create a box for the content of the accordion with desired content (lorem ipsum in this case)
- Convert the content box into a dynamic panel (don't' need to add any additional states)
- Add interaction to the header box to show hide the content box dynamic panel on click with these settings:
- - Target = content-box
- - Type = Toggle
- - Animate show = slide down, 500, linear
- - Animate hide = slide up, 500, linear
- - More options = push/pull widgets, below, linear, 500
Do that and you've got accordions that slide up and down while the header stays static. It also pushes/pulls the widgets below it. As a cheery on top you can group the entire thing and copy and paste to make each of your accordians.
Great solution Aaron! Thanks for sharing. You can even simplify it a bit by not converting a content box to a dynamic panel, since we do not creating any states.
Was looking for "move with..." feature and figured there was a new way to do this since I last used Axure. Thank you !
I have tested this out without using hotspots on top of the dynamic panels and it works perfectly fine. Did click or tap interaction on the dynamic panel itself and switching panel's state to "next" with wrapping from last to first. That's it ))
Loved the "hotspot" hack. Saved me plenty of time
This was super helpful and easy to follow for a beginner like me, thank you so much!
Awesome! the videos will get more difficult as you progress in the playlist.
The titles on each accordion look funky when the new panel scrolls in. Like they should already be there. Anyway to fix this?
Cool example, and very well explained!
Thank you for this video. I tried using the Push/Pull Widgets option once, and it didn't work as expected. Do you have to define a lock position for those elements you do not want to push/pull? For instance, if you had a left nav bar on the screen, when you use Push/Pull Widget option, will it not move everything below the accordion down? I think that's what happened when I tried it. How do you prevent some things from pushing/pulling and only affect certain elements that you do want to push/pull?
Great Tutorial, could not find any other straightforward solution for this issue. I did try to add another level and that caused some behavior issues. Any idea if this should work with another expend level? Thanks!
Was able to solve this by creating a 2nd level menu item that behaves the same as the top level, but without creating another Dynamic panel.
Good job !
Clear explanations! Thanks :)
Nice accordian music
I am using the latest version of RP 9 (9.0.0.3687) and it already have a pre-made widget "Accordion". If lo-fi prototyping, it should save a lot of time.
Hey, yep that provides the basics - I've covered the new sample patterns in one of the recent videos
Thank you so much for these videos, they are amazing. My question is this: I want the user to see the particular contents of an accordion, and want to load a page with an accordion in an open state. When I do that, it does not move the next page buttons out of the way automatically, but rather shows them in the middle of the accordion. Thank you for your help.
Hey, how are you making it open? I'd suggest to add the opening behaviour to "onpageloaded" interaction and once the page loaded open it, push the widgets etc. just like in the video, in that case it should push all the stuff below. Let me know if it works
Hi, I just did what you taught. Everything is perfect except last logic--only one drop. I set up default to each dynamic panel but once a accordion drops, then another one drops, the distance between them will be larger and larger. Do u know why?
Hey, depends how you set it up, might need to add reset of coordinates. Or you might want to use push and pull option. I think its in the newer video in the playlist, look for push/pull
@@vaexperience i have watched that video. My problem is still unsolved
@@Nobody-wm9eg Hey, I have same problem of you. Did you solve it? I can't find the caution. Please help me.
@@김미현-k3f I'm having the same issue too. Have you been able to resolve it
Please have you been able to resolve this issue
Please anyone who can was successfully able to replicate the last part of the video where the accordion worked without creating spaces between each of the items upon clicking should help.
Reset the coordinates after open/close or check the video on push/pull accordions in the playlist
@@vaexperience What are my to set the coordinates to? Attached is a link to a 24 sec video of the issue: www.loom.com/share/3edea464743d489e9a2a0db6261d1049
Look at the video and track the steps: 1) you opened an item and pushed the below elements to new cordinates. 2) you opened another item and pushed the elements that lay in the bottom to new cordinates. But did you return the step 1 items back to where they should be? that's the reset you need. If you action something, make sure that those actions are cancelled fully when you action something else
I wish you would drop the background music, for me it adds no value to what you are teaching and creates a distraction. Basic UX tenet, if it doesn't add value, lose it because it could be consuming cognitive resources. It's a suggestion.
Hi! I did it like you and then tried to apply interactions in another way and both resulted in the same bug/issue. I don't know why is this happening all the time. My first accordion creates an empty space every time it is hidden when I clicked on other accordions. The same happened when I clicked on the first when the second was open. I don't expect it but If you would be able to check it, here is the link: bit.ly/2KlLD8f. Anyway, I will try to fix this somehow. Thank you a lot for your tutorials! It is awesome content, nicely explained! Cheers!
Hey, interesting challenge. I went through your RP file - I think the issue is that you missed push/pull on all acc items when setting them to default/expanded. Because your first acc item expands and pushes the 2nd and 3rd down you need to tell it to pull when expanding the 2nd and collapsing the first. hope it makes sense. Just tick the push/pull on all of them :)
@@vaexperience Hey, thank you for helping me out! Unfortunately, didn't work out. It crushes along the way... I think it is kind of bug in Axure for Windows. It is the second time when I add a little bit more complexity to prototypes and it brokes. I tried to solve it in two different approaches but still the same issue. I think it is time to move on ;)
@@vaexperience I'm wondering if you could share this one particular RP file with your solution with me? I would like to see if this issue appears regardless of the file.
Hey drop me an email (in about tab) and i can share it. I'm also combining all the patterns from videos into an axure resource which will be done shortly, time allowing of course.
@@vaexperience sounds great! I will be waiting for this! :) dropped an email, thank you
Loving the videos VA, thanks! - Can I sugest an improvement to the accorion: bd7epi.axshare.com/#id=i50m8g
It uses change shape size instead of panel state change, and it's a bit smoother
Very cool and smooth indeed! can you share the source file for others or make a tutorial on how to do this?
@@vaexperience Making videos is hard! But I managed it. Hopefully it's clear enough?
ruclips.net/video/BS0pAO9ey84/видео.html
Source file:
www.dropbox.com/s/pt4hd99i88i1iui/Accordion.rp?dl=0
Man you don't teach! you just show us what you do so fast!