I'm working with a team on implementing an improved checkout flow to a new multi-store web platform. All of our stores will be based around responsive design on migration to the new platform so we won't have separate mobile and desktop versions of a store.
We're looking at implementing a single page checkout with four 'step' panels (address, shipping method, payment type, summary/confirm), using a fair amount of Ajax to keep the basket summary up to date as the inputs change.
On a desktop sized display this would all appear on one page and would re-flow when changing page size. At the mobile size break point, we'd like the four stage input panels to collapse into an accordion view - it would be the same four panels with the same input form fields, but only one panel is visible with the other three collapsed.
I've searched and searched and can't seem to find an example of this in use. I can find similar things using separate mobile and desktop versions of a site, but not using responsive. Is it possible to do what we're envisioning?
My other idea was to reflow the panels into a long page on mobile but then keep the panel headers sticky at the header and footer so they never drop out of view, then the user can always see the different sections and the header blocks could be links to anchor points in the page - but I fear that's probably an even more complex way of achieving this...
All help gratefully appreciated - although go easy, I'm not a developer myself, just a project manager with a better than layman understanding of it.