Show and hide DIV tag
-
Hi, I have a DIV tag that I want to hide the content when the webpage loads and you can click a link to show the content in the tag or hide it. What I am wanting to do is have one link that says "show" before you click it and when you click it, shows the content of the DIV and the text changes to "hide" and when you click "hide" the DIV content hides and the text reverts to saying "show" and when you click it, it shows the DIV content and so on. Code in header:
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>the DIV tag where the content is placed in is this:
;
Content here
I have this code to show and hide the div tag:
<a onclick="javascript:showDiv()"</a class="style110"> show</a><a onclick="javascript:hideDiv()" class="style110">hide</a>
Is there a way of using one link to show and hide the div tag rather than two seperate links? And is there a way of automatically hide the content when the page loads so you have to click "show" to show the content? Thanks in advance
In the end we're all just the same
-
Hi, I have a DIV tag that I want to hide the content when the webpage loads and you can click a link to show the content in the tag or hide it. What I am wanting to do is have one link that says "show" before you click it and when you click it, shows the content of the DIV and the text changes to "hide" and when you click "hide" the DIV content hides and the text reverts to saying "show" and when you click it, it shows the DIV content and so on. Code in header:
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>the DIV tag where the content is placed in is this:
;
Content here
I have this code to show and hide the div tag:
<a onclick="javascript:showDiv()"</a class="style110"> show</a><a onclick="javascript:hideDiv()" class="style110">hide</a>
Is there a way of using one link to show and hide the div tag rather than two seperate links? And is there a way of automatically hide the content when the page loads so you have to click "show" to show the content? Thanks in advance
In the end we're all just the same
-
Hi, I have a DIV tag that I want to hide the content when the webpage loads and you can click a link to show the content in the tag or hide it. What I am wanting to do is have one link that says "show" before you click it and when you click it, shows the content of the DIV and the text changes to "hide" and when you click "hide" the DIV content hides and the text reverts to saying "show" and when you click it, it shows the DIV content and so on. Code in header:
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>the DIV tag where the content is placed in is this:
;
Content here
I have this code to show and hide the div tag:
<a onclick="javascript:showDiv()"</a class="style110"> show</a><a onclick="javascript:hideDiv()" class="style110">hide</a>
Is there a way of using one link to show and hide the div tag rather than two seperate links? And is there a way of automatically hide the content when the page loads so you have to click "show" to show the content? Thanks in advance
In the end we're all just the same
Personally, I would forget about Netscape users. Anypme that still uses Netscape 4 gets what they deserve.... And while JQuery is good, it won't help you understand anything, and IMHO is a bit like using a sledgehammer to crack a nut, in this scenario anyway. The following will work in most browsers - you won't get too many complaints. NB, you don't, of course, need to pass the element ID's as variables to the toggle function, but could hard-code them within - but doing so makes it more generic for use elsewhere, or with more than one such show/hide link on the same page.
<html>
<head>
<title></title>
<script language="javascript">
function toggleDiv(d, h) {
var div = document.getElementById(d);
var lnk = document.getElementById(h);
if (div.style.display == 'none') {
div.style.display = 'inline';
lnk.innerHTML = 'Hide';
} else {
div.style.display = 'none';
lnk.innerHTML = 'Show';
}
}
</script>
</head>
<body>
<form id="form1" >
<div><p><a href="#" id="lnk" onclick="toggleDiv('fred','lnk')">Show</a></p></div>
<div id="fred" style="display:none;">Now you see me</div>
</form>
</body>
</html> -
Hi, I have a DIV tag that I want to hide the content when the webpage loads and you can click a link to show the content in the tag or hide it. What I am wanting to do is have one link that says "show" before you click it and when you click it, shows the content of the DIV and the text changes to "hide" and when you click "hide" the DIV content hides and the text reverts to saying "show" and when you click it, it shows the DIV content and so on. Code in header:
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>the DIV tag where the content is placed in is this:
;
Content here
I have this code to show and hide the div tag:
<a onclick="javascript:showDiv()"</a class="style110"> show</a><a onclick="javascript:hideDiv()" class="style110">hide</a>
Is there a way of using one link to show and hide the div tag rather than two seperate links? And is there a way of automatically hide the content when the page loads so you have to click "show" to show the content? Thanks in advance
In the end we're all just the same
Dot't use
style.visibility = 'visible'
use
style.display = 'none'
Rating always..... WELCOME Be a good listener...Because Opprtunity Knock softly...