I was hoping you guys could help me out..
Take a look at this page:
On the right panel where you can see "Already a member? Click here to login" i want the content inside the box to change.. only within the box once this link is clicked.
Is this possible?
I'd use the off-screen positioning method instead. If you're using a screen reader that does not update the virtual buffer, the clicking won't seem to do anything because in the virtual buffer the div is still display: none which the reader will ignore.
If the div is positioned off-screen, then it doesn't matter so much if the buffer doesn't update (newer readers with virtual buffers can update, but since they're expensive, it's likely older readers are still in use) because the reader can access the "new" div either way.
So, onload, a class gets added to the div, and CSS styles that class to make the div position: absolute and left: - a gazillion units. Clicking on the button removes the class, which puts the div back in place and visible on the screen. So, you're just adding/removing classes with JS.
That visually swaps the both