Hi,
First time posting here.
I tried looking for help on this but couldn’t find anything.
I am trying to create multiple buttons that open and close different strips with content on them when each button is clicked.
I have uploaded a video below from another site with the exact way I would like this to work.
Is this possible to do on with Corvid? If so could someone please help me with the code for this? I am a real newb to code.
Thanks.
Yes you can do that.
You simply have the three strips for those three buttons setup as collapsed on load.
Then when the user clicks on the needed button, the collapsed strip can then be set in code to expand and show underneath the strip with the buttons in, whilst pushing down the strip below it with the video in it.
You can simply do this for each collapsed strip so that whichever one they click on to view, the actions will all be the same.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html
Wix tutorial for collapse and expand template.
https://www.wix.com/corvid/example/collapse-elements
Thanks givemeawhisky! I understand what you mean and I’m having a go but still having trouble writing the code out for it. Like I said, total noob when it comes to code.
Have a look here about working with elements id names, properties panel and user events etc.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel https://support.wix.com/en/article/how-to-change-the-text-label-of-a-button-with-events https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
So if you have changed the button id on your first button from say button1 to firstButton, then when you add the onClick through the properties panel it will automatically put it in your code as
export function firstButton_onClick(event) {
Don’t worry if your code doesn’t show the onClick and just shows click instead, just a newer way of doing the event handler in the code on your page.
Then you can simply add your code straight underneath it for the expand and collapse codes.
export function firstButton_onClick(event) {
$w("#firststrip").expand();
$w("#secondstrip").collapse();
$w("#thirdstrip").collapse();
}
Obviously, you would setup each strip with all the elements for that strip attached to it, so that whatever you do to the strip happens to the whole elements.
Wix Editor: Attaching Elements to Strips and Columns | Help Center | Wix.com
Wix Editor: Attaching Elements to a Box | Help Center | Wix.com
Wix Editor: Adding and Setting Up a Box | Help Center | Wix.com
Plus, have all the three strips setup to be collapsed on load in the properties panel for each strip element, that way everything in those three strips are not taking up any room on your page when the webpage is first loaded.
If you use .show() and .hide() instead of .expand() and .collapse(), you are getting the same thing happening on your page, however the strips will still be taking up room on your page and will just be hidden from view instead.
You would need to do the same code for all three buttons and strips, so simply change the button name in the export function and the strips to expand and close below it too.
Just make sure that you leave a line space between each export code line and you have matching parenthesis and curly brackets in your code. So, make sure that you have matching pairs of open { and closed } and open ( and closed ) in the code.
You will get used to doing this if you look at the code and see the symbols in the code itself.
So your code should look something like this, although remember that you would need to have the onReady page function at the top too.
export function firstButton_onClick(event) {
$w("#firststrip").expand();
$w("#secondstrip").collapse();
$w("#thirdstrip").collapse();
}
export function secondButton_onClick(event) {
$w("#secondstrip").expand();
$w("#firststrip").collapse();
$w("#thirdstrip").collapse();
}
//and so on.....
Finally, have a read here of how using collapse affects your page.
Velo: How Page Layout Is Affected When Elements Change Size | Help Center | Wix.com
@givemeawhisky , cool name by the way! I could do with one right about now.
Not sure what I am doing wrong, I thought I had everything right and tried a simple 3 button with 3 strip preview just to experiment but I cant get it working. Am I meant to start the code with something else, or am I missing something?
Sorry for all the questions!
Quick reply as not on for long.
Just looking at your code, have you simply copied and pasted it from the post above?
No worries if you have, however you actually need to use the properties panel for each element to add the event handler function to the code itself.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
You can change the code so that the event handler is written into the function itself and you don’t actually need to add it through the properties panel for the element, however for yourself it is easier for you to add it from the properties panel for the button elements so that you are sticking to the one way of working and keeping it all simple for now.
Finally, as for the code start, you need to have your imports at the top of your code where you import anything that you have used like Wix Data, Wix Stores, Wix User, Wix Location, Wix Window, etc and then followed with the page onReady function, then you can have your functions for the strips.
https://www.wix.com/corvid/reference/$w.html#onReady
You can find more about it here too.
https://support.wix.com/en/article/corvid-working-in-the-code-panel#making-sure-the-element-has-loaded-before-you-reference-it
Thanks for all your help givemeawhisky!!! After a couple hours of trial and error and reading through everything you gave me I figured it out. Awesome!!
@givemeawhisky How can I make a second click of the same button close the strip without having the open and close code confuse each other?