You’ll probably want to streamline the demo some more before folks will take a real look. We just need a very minimal example of the problem – no visual fluff or big chunks of content like what’s provided – we only need just enough HTML, CSS and JS to illustrate the issue.
However, taking a cursory look at the JS, it appears that the tabs are being switched using display. Unfortunately you can’t animate the display property. With it, an element is either “there” or it’s not. Try looking to different CSS properties to animate between, such as opacity instead.
In your pen, the divs appear to be lined up beneath one another. So I tried to give .pages an absolute display, only when I do this i cannot highlight the text, or scroll it (I applied your code to my initial pen, and found that i couldnt scroll) because the last div is placed on top of it, tho its invisible. I tried to alter the z-index of the individual tabs, tho it didn’t really make a difference and would prefer not to customize every individual tab if possible
I have but I couldn’t get it to work. Heck, I even tried other code but given the specific properties of the divs that i want to use this for, it wouldnt work. My divs would become invisible. It just so happened to only work with this code.