Show/hide jquery using block / none
Question
Could anyone tell me how I can use this code to show and hide data between DIV`s (not to hide and show - I want the other way)?
I`m using in .js file:
function toggle(sDivId) {
var oDiv = document.getElementById(sDivId);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}
And in .php file:
<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
<div id="divContent1">
text here
</div>
</div>
This code is working just fine but when the page is loading I wish to have text already hidden (not after when I click "Hide and show" text).
Thanks!
7 answers
solution1
1 2013-09-21 18:01:28
You can use the code you have but just add display:none; in the css. Or in the php inside the style="display:none;"
<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
<div id="divContent1" style="display:none;">
text here
</div>
</div>
jQuery has also a toogle() function you could use.
demo
solution2
1 2013-09-21 18:04:25
I may have misunderstood your question, but if you want the text hidden on page load can't you just stick a display:none tag, as follows:
<div id="divContent1" style="display: none">
text here
</div>
solution3
1 ACCPTED 2013-09-21 18:06:46
solution4
1 2013-09-21 18:08:25
The code you provided isn't using jquery. If you'd like to do this using jquery you can change things to something like this.
function toggle(sDivId) {
$("#"+sDivId).toggle();
}
and to your php block you'll want to add display:none; to initially hide the inner div
<div onclick="toggle('divContent1')" style="cursor: pointer;">Hide and show</div>
<div id="divContent1" style='display:none'>
text here
</div>
</div>
solution5
0 2013-09-21 18:03:36
You can use toggle () function to alternately switch between show () and hide (). Otherwise, use the show () and hide () functions directly.
solution6
0 2013-09-21 18:07:43
在body的onload事件中调用函数toggle('divContent1')
<body onload="toggle('divContent1')">
solution7
0 2013-09-21 18:09:41
Use this code :
function load(){
document.getElementByID('divContent1').style.display = 'none';
}
and in your html
<body onLoad = "load()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.