One button to switch view between Blog Feed and Pro Gallery. (show/hide)

Hey there, I am new with coding so I am trying to figure stuff out through this forum, tutorial videos and logical thinking. Now I am trying to achieve something, but there are no tutorials or posts about this.

I want to have a page that shows a Wix Pro Gallery at load and I want a button to hide the Wix Pro Gallery and show a Wix Blog Feed widget. So a button to show/hide between these two objects.

I first tried to do this with a slide show by putting the blog feed in one slide and the pro gallery in the second. But unfortunately it is not possible to put a blog feed in a slide. So I need to find a way to work around this.

This is what I came up with, but it does not work and I do not understand why.

export function artChangeViewButton_click(event) {

if( $w("#artBlogFeed").hidden ) {
  $w("#artBlogFeed").show();
}
else {
  $w("#artBlogFeed").hide();
}
if( $w("#artGallery").hidden ) {
  $w("#artGallery").show();
}
else {
  $w("#artGallery").hide();
}
}

When I click the button nothing happens.

I hope someone can help me with this or knows a better way to achieve the same.

Try this:

export function artChangeViewButton_click(event) {
  const gal = $w('#artGallery'),
    feed = $w('#artBlogFeed');
  if(!gal.isVisible) feed.hide().then(() => { gal.show() });
  else gal.hide().then(() => { feed.show() });
}

Hey David! Thanks, but unfortunately it did not work. Again, nothing happens when I click the button. I have already found another solution that works for the website, so this thread is no longer needed. If anyone else wants to know how to make this work, feel free to continue!

Did you actually add the onClick event handler in the properties panel for the art change view button?

Yo guys, I am a web designer not a developer. I did add the onClick event, but if you can see, it’s already in the code. So, it was not necessary.

I am not a developer either, however I still know if I have added the event handler through the properties panel or not!

As in your response - “I did add the onClick event, but if you can see, it’s already in the code. So, it was not necessary.”

Well in your code it is necessary to have gone through the properties panel for your change view button and add the onclick event handler through it, as shown clearly on this Wix Support page.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
https://support.wix.com/en/article/corvid-working-with-the-properties-panel

If you are wanting to add it to the code itself, so that you do not actually need to add any event handler through the properties panel, then you would write it as this.

$w("#artChangeViewButton").onClick( (event) => {

So maybe things are necessary…

Also, I would suggest that you keep this API reference bookmarked so that you can refer to it when needed. Velo API Reference - Wix.com

To be safe, you can use this notation, so that the JQuery engine underlying Corvid will automatically add the event listener for you:
$w(‘#elementID’).onClick((event)=>{ //your event here });

No need to worry this way about the properties panel.