I have a teaching web page where, in a particular section (DIV), a series of Questions must appear one after another. Once the user answer Q1, then Q2 is shown just below, etc.
Here is the structure:
Mother_DIV contains: Text with question and a Button1
DIV2 as display=none which contains: answer to question above + text and a Button2
DIV3 as display=none which contains:
Answer to question above + text and a Button3
And so on if needed.
There is a js show(element) function that changes the display style of any element to "inline" Each button must change the display of the foillowing DIV to inline.
Buttton 1 has: onclick=show('DIV2') And now when DIV2 is visible, Button2 is visible too
Buttton 2 has: onclick=show('DIV3') And now when DIV3 is visible, Button3 is visible too...
The script works like a charm on IE9.
On Firefox or Webkit browsers, things get hectic!
Button1 works and DIV2 is shown, but then, Button2 is NOT recognized as a button! Clicking has no effect, and mouse hovering doesn't change the pointer to a hand.
In order to fix it, I changed the structure:
Mother_DIV contains: Button1 and Button2 and Button3 etc. Plus some text
DIV2 as display=none which contains: text
DIV3 as display=none which contains:
text
Guess what: all buttons are now working, each successive DIV being displayed with its text chunk!
The only issue is that this UI is not acceptable, because when the text is too long and user scrolls down, the buttons are no more in the visible part of the page.
Wouls someoe have an idea how to process and save my day?
