I ended up using basic Javascript + CSS tabs for this. For my use-case, the tabs are really cosmetic, ie, they break up the page but aren't meant to be submitted separately.
I also considered using pure CSS tabs, however from my investigation they don't work with cases where the heights of the tabs are not all equal and may change using AJAX.
The best solution I can come up with is to make a list of <a>
links, then use the onclick Javascript event for each URL to make the div ("tab") that it is attached to (using the href
attribute of the <a>
to save the id of the div you are trying to open), and in the onclick change the display CSS property of the divs (by changing the className Javascript property to show 1 div and hide the others). That way as you click through the list the divs become visible.
There are many ready-made implementations for Javascript tabs (most Javascript libraries probably have one) as well as tutorials online. One that implements what I described above is: here