Cool!
I've solved this challange too (thanks for the like) and I wanted the sidebar to be interactive (just like yours) so the user can jump between steps. But then I realized that then the user can skip some steps (like addons) and if this was a real subscription form, we wouldn't want that because we want the user to pay more. I think you should correct the form so that the user can jump only if he/she has completed the previous steps (clicked next).
And just one more tip for future projects maybe, if you want to create a sidebar like this, the easiest way is to add input type radios with the same name inside all .step
containers with a unique value (<input type="radio" name="step" value="1">
), and style like
.step > input[type="radio"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
appearance: none;
}
Appearance none will hide the radio button, so nothing will change apparently but if you click on one step, the radio buttons will be checked secretly and the others will be unchecked automatically (because of the identical name). Also you have to give .step
a position: relative
for the positioning to work properly.
Then you can get which step is active from js with document.querySelector(.step > input[type="radio"]:checked).value
, and it'll return the checked radio button's value.
Or you can display steps from only css by adding all the step forms inside .step__component
and display only that what is active with this rule:
body:has(.step > input[type="radio"][value="1"]:checked) .step__component form:not(:nth-child(1)),
body:has(.step > input[type="radio"][value="2"]:checked) .step__component form:not(:nth-child(2)),
body:has(.step > input[type="radio"][value="3"]:checked) .step__component form:not(:nth-child(3)),
body:has(.step > input[type="radio"][value="4"]:checked) .step__component form:not(:nth-child(4)) {
display: none;
}
This will work like this: 'If the radio button in .step
with the value of 1 is checked then hide all forms inside .step__component
which is not the first inside .step__component
'.