I made a structure for a multi-step form, in which you can click to go to the next slide

I Need Help
1

Снимок экрана 2021-05-28 в 16.00.03
Снимок экрана 2021-05-28 в 16.00.031642×1590 172 KB

The picture shows an approximate diagram.

The structure only works forward. When, by analogy with clicks to the next slide, I made a button with a transition to the previous slide, it was not reflected - there was a blank screen.

Because it didn’t work correctly or the onclick attribute= " document.getElementById (‘q1’). style. display= ‘block’;"

Interactions toggle class, toggle visibility were triggered incorrectly.

If anyone can figure out what’s going on, I’d appreciate it. I’ll attach the source file.

https://drive.google.com/file/d/1_wwdAgmSkGtLLjVHAh7uGjz0mVSjdNqH/view?usp=sharing

2

Tab Anything Pro is just what you are looking for. It does this and so much more.

2 Likes
3

Thank you for responding, although this is not exactly what I need.

I figured out the question a little and I got something, updated the topic. What do you think about my decision?

4

Just the other day I posted some code for switch’s toggling content. The principle will be similar and it would get you heading in the right (maybe a) direction.

5

Not sure if your issue was fully resolved but I may have something for non-coders or beginners.

Recently, I made a simple two step form without having to use custom js. As long as all your fields are within the form container you can group them into div containers and toggle visibility for both the current slide and next one… that is if you are content with a back and forward button.

The next possibility is to expand upon your onclick attribute and have button links to toggle a specific step.
Add a function to your code editor

functionname() {

document.getElementById (‘q1’). style. display= ‘block’;"
document.getElementById (‘q2’). style. display= ‘none’;"
document.getElementById (‘q3’). style. display= ‘none’;"
document.getElementById (‘q4’). style. display= ‘none’;"
}

Repeat this function for each slide

6

Thank you for your answer. Please make an example file based on the one I attached with the implementation of these two methods. And then I can’t implement the methods you suggested. I would be very grateful.

7

Wow great, and where to see this code code for switching content. Write a link, I will be grateful.