Question

I am creating a small application where I am displaying some text wrapped in 3 divs so I am actually displaying 1 div at a time also there are prev and next buttons for users to toggle between the div’s. Now when javascript is turned off i just want to display 1 div without the prev and next buttons. I have and idea that it can be done with javascript by manipulating the CSS like.

document.getelementbyid("id1").style.display="visible";
document.getelementbyid("id1").style.display="none";

Thanks

Answer 1

You can set those div’s to display:none; (in CSS) by default, add id for both, and after page load set document.getelementbyid(..).style.display=”visible”; (in JavaScript)

PS. u could use jquery or other, will be much more easy 😉

try this:

[style]#prev, #next { display:none; }
[js]
function showButtons()
{
    document.getElementById('next').style.display="block";
    document.getElementById('prev').style.display="block";
}
[html]
body onload="showButtons()">
div id="next">next..
div id="prev">prev..

This way without JS prev/next wont be displayed, and with JS they will show after page loads.