Show/Hide code help [Archive] - Dynamic Drive Forums

wakrah

12-22-2009, 01:05 PM

Hi i need some help with editing show/hide code it is works fine with me but it is show the content every time i refresh the page what i want is to be the conetent hidden till i click on the link to show the content so every time i refersh the page no thing appear untill i click on the show link.

<head>tag
<script type="text/javascript">
</script>

in <body>tag
<span style="cursor: hand; cursor: pointer" onclick="toggleInfo('ans0');">
>> Hide/show content
</span><br><br>
<div id="ans0">

content

</div>

jscheuer1

12-22-2009, 02:31 PM

Set the display to none in the stylesheet.

vwphillips

12-22-2009, 05:06 PM

the onload function will hide the content each time the page is loaded or refreshed.

Is that what you want??

NOTE
setting display to none in the stylesheet will do nothing more and result in poor accessability if javascript is disabled.

jscheuer1

12-22-2009, 05:38 PM

Setting the display to none will ensure that the page need not complete loading before the items are hidden (display:none;). If accessibility is an issue (and it should be, my last post on this was the 'quick answer'), one may create a style section or link using javascript, so that only javascript enabled users will get that treatment. Here's one possible way:

<head>
<script type="text/javascript">
if(document.getElementById || document.all)
document.write('<style type="text/css">.showHide {display:none;}<\/style>');
var storedDiv = null;
function getDiv(oID) {
if(document.getElementById) {
return document.getElementById(oID);
} else if( document.all ) {
return document.all[oID];
} else { return null; }
}
window.onload = function () {
for( var i = 0, y; y = getDiv('ans'+i); i++ ) {
y.style.display = 'none'
}
};
function toggleInfo(oID) {
var oDiv = getDiv(oID); if( !oDiv ) { return; }
oDiv.style.display = (oDiv.style.display=='none') ? 'block' : 'none'
if( storedDiv && storedDiv != oDiv ) { storedDiv.style.display = 'none'
} storedDiv = oDiv;
}
</script>
</head>
<body>
<span style="cursor: hand; cursor: pointer" onclick="toggleInfo('ans0');">
>> Hide/show content
</span><br><br>
<div class="showHide" id="ans0">
content
</div>

Give the "showHide" class to all the scripted items (ans#) that you want to have a display of none.