Forum | Appery.io

On my login page I have 2 buttons, 'Login' and 'Sign Up'

I also have 2 grids (signin_grid, signup_grid) both containing inputs and buttons that are relevant to Logging in and Signing up.

on page load the JS:
preApperyio("signup_grid").hide();
Apperyio("signin_grid").hide();/pre

Login btn click JS:
preApperyio("signin_grid").toggle();
Apperyio("signin_Email").focus();
Apperyio("signup_grid").hide();/pre

Sign up btn click JS:
preApperyio("signup_grid").toggle();
Apperyio("signup_firstname").focus();
Apperyio("signin_grid").hide();/pre

This had been working fine for a good few months before christmas.
For some reason now when either button is clicked the grids dont appear.

I changed it to .show rather than .toggle

Login btn click JS:
preApperyio("signin_grid").show();
Apperyio("signin_Email").focus();
Apperyio("signup_grid").hide();/pre

This worked, and so did the rest of the code, so it appears that the .toggle function is not working for the grid component.
I changed the it back to .toggle instead of show and I removed the grid.hide on page load.
This time when the button was clicked the grid disappeared, but when clicked again the grid did not re-appear. so it seems like that toggle function is just hiding the component rather than toggling it.

I've tested the toggle function on other components and it works for them.

As a work around i'm using .hide and .show but it needs fixing.

I've tried this in chrome and safari and the problem is the same for both.

Hi Joe,

Please use following JS code to hide/show grid:

pre

//To hide grid
Apperyio("mobilegrid_47").closest('[data-wrapper-for]').hide();

//To show grid
Apperyio("mobilegrid_47").closest('[data-wrapper-for]').show();

/pre

Regards.

Is there a way to toggle a grid yet?

Hello Jack,

Yes, you can use JS above for that. Could you clarify what you have tried and what exactly does not work?

Apperyio("signup_grid").toggle(); did not seem to do any show or hide functionality.

Please use JS below:

preApperyio("signup_grid").parent().toggle();/pre

That does not work. Nothing seems to happen
I am testing on a test page with one label in a grid and one button outside the grid that triggers the JS.

It works fine on our enviroment.

Please provide us with a public app link(https://devcenter.appery.io/documenta...) and steps to reproduce.

Sorry for the confusion Sergiy. I have successfully gotten the code you gave to work.

Sorry for taking up your time.