Help with javascript code to show or hide groups

Hi , can anyone help ?

I work on the project where there are 8 groups . Each one is hidden , besides group1.
When i click in the button in the group1 the group1 is hidden and the group2 is showed .

Everythings works great but I fail when I try to do this for mobile . I mean I use javascript code with toolbox plugin . I trying to set event handler for back button on mobile is clicked . I use this code :
"window.onpopstate = function(event) {

var elementPokaz = document.getElementById(“5”);
elementPokaz.style.display = ‘block’;

}
"

Overall this works fine but only If I put eg code - alert(“You clicked back button”) - but If I want to control hide / show groups I fail . Each of the 7 groups is named with it ID : “1” , “2” , “3” , “4” …

And what I try to do is show the previous group when I click back button on mobile but it doesnt work .

Can anyone help ?

Thanks

Hey @gagarindes :wave:

Have you tried using URL parameters or setting a state on the page instead of JavaScript? Showing and hiding with conditionals based on a parameter or state is a pretty good built-in feature of Bubble. I think you might be making it more complicated than it has to be.

Here is a video that shows you how to do it with states. I prefer to use URL parameters but I don’t have a video yet for that.

Check it out: NoCodeMinute - eLearning Hub

Hope that helps. :blush:

1 Like

hi @J805 , ok I will check it now , just would like to ask - i would like to connect this with back button pushed on mobile . Thank You so much for help .

Hmm :thinking:

Which back button? The back button for the browser?

@gagarindes The issue you are having is with the element ID. In HTML you can start an element ID with a digit, but CSS will require you to escape that digit with the “#” symbol. I get around this nonsense by just starting my element IDs with a letter, e.g.

`"window.onpopstate = function(event) {

var elementPokaz = document.getElementById(“E”);
elementPokaz.style.display = ‘block’;

}
"`

In this case of course you now have to go to element 5 and change it’s HTML ID to E. It’s a silly problem, but that is what is breaking your code, not the actual code itself.

If the ID absolutely has to be a number or start with a digit, check out this post on ways to handle that: javascript - Can I have an element with an ID that starts with a number? - Stack Overflow

@J805 it seems to me like this user is trying to let people know when they’re about to navigate away from the page so as to prevent the loss of unsaved work or something like that. With URL parameters being the better solution, honestly for something this simple I would just show the default browser alert with alert(“Text To Alert”)

1 Like