...

View Full Version : Help with show/hide (display:block/none) JS code



patsol
01-05-2007, 01:09 AM
Hi everyone,

I have a JS situation I need some help with. :)

I have the following show/hide JS code working fine (2 iterations):


function showHidespec1(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details"><img src="images/hide_details.gif" width="68" height="9" alt="" border=0></a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a>';
}
}



function showHidespec2(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details"><img src="images/hide_details.gif" width="68" height="9" alt="" border=0></a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a>';
}
}


HTML code calling JS:


<div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
Text1
</div>




[...]


<div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="See Details"><img src="images/see_details.gif" width="68" height="9" alt="" border=0></a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
Text2
</div>



I'd like to be able to show and hide both divs (or all if more than 2) via a separate "View all" link. I've tried a few things but just no luck. :(

Any JS experts out there have an idea? I'd really appreciate any help offered.

Thanks,
Patrick

patsol
01-05-2007, 02:45 AM
I've setup a test URL to visualize it a bit better..
http://www.esolrac.com/test/test.html

6arredja
01-05-2007, 03:49 AM
i think i see the problem



onclick="showHidespec3(this,'show')


is giving var _myTableObj a value of specialsID3_Div
and

you dont have a div with that id

or thats what i see from looking at the source of your test.html

patsol
01-05-2007, 05:15 AM
Thanks for the reply 6arredja.

I actually do have that div: "specialsID3".

It's empty and really just a placeholder for the "View all" / "Hide all" link (I removed it to avoid confusion). Just in case my first post was a bit too vague...what I'd like to happen is that link simultaneously open/close all "View Details" blocks.

6arredja
01-05-2007, 05:51 AM
do you have all the spec predefinded or do you want them made on the fly?

what i mean is do you want a function that will find all the specs then decide whether to hide them or not

or

do you want a function that has the spec's hard written in then hides or shows them?

patsol
01-05-2007, 06:05 AM
do you have all the spec predefinded or do you want them made on the fly?

what i mean is do you want a function that will find all the specs then decide whether to hide them or not

or

do you want a function that has the spec's hard written in then hides or shows them?I think the latter will work great (whichever's easier :) )


Thanks again for your time!

6arredja
01-05-2007, 06:21 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Test</title>

<script type="text/javascript">
function showHidespec1(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
}
}



function showHidespec2(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
}
}

function showHidespecall(_myObj,_action) {
if(_action == 'show') {
document.getElementById('specialsID1').style.display='block';
document.getElementById('specialsID2').style.display='block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
}
if(_action == 'hide') {
document.getElementById('specialsID1').style.display='none';
document.getElementById('specialsID2').style.display='none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'show\'); return false" title="View Details">View Details</a>';
}
}



</script>

</head>


<body>






<div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="View Details">View Details</a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
Text1 Text1 Text1
</div>




<br><br>


<div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="View Details">View Details</a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
Text2 Text2 Text2
</div>




<br><br><br>



<div id="all" align=left><a href="#" style="cursor:pointer;" title="VIEW ALL" onclick="showHidespecall(this,'show');">VIEW ALL</a> (clicking shows both hidden "View Details" divs above)</div>







</body>
</html>


heres what i got

patsol
01-05-2007, 07:09 AM
6arredja, that works great, thank you!

Is there any way clicking "VIEW ALL" not only displays the hidden divs, but also changes the 2 "View Details" links to "Hide Details" and vica versa (so the logic is kept throughout)? If this is what you had in mind in your first option ("a function that will find all the specs then decide whether to hide them or not"), I apologize for not catching that.

Patrick

6arredja
01-05-2007, 05:24 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Test</title>

<script type="text/javascript">
function showHidespec1(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
}
}



function showHidespec2(_myObj,_action) {
var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
if (_action == 'show') {
_myTableObj.style.display = 'block';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
}
if (_action == 'hide') {
_myTableObj.style.display = 'none';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
}
}

function showHidespecall(_myObj,_action) {
if(_action == 'show') {
document.getElementById('specialsID1').style.display='block';
document.getElementById('specialsID2').style.display='block';
document.getElementById('specialsID1_Div').innerHTML = '<a href="#" onclick="showHidespec1(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
document.getElementById('specialsID2_Div').innerHTML = '<a href="#" onclick="showHidespec2(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'hide\'); return false" title="Hide Details">Hide Details</a>';

}
if(_action == 'hide') {
document.getElementById('specialsID1').style.display='none';
document.getElementById('specialsID2').style.display='none';
document.getElementById('specialsID1_Div').innerHTML='<a href="#" onclick="showHidespec1(this,\'show\'); return false" title="View Details">View Details</a>';
document.getElementById('specialsID2_Div').innerHTML='<a href="#" onclick="showHidespec2(this,\'show\'); return false" title="View Details">View Details</a>';
_myObj.parentNode.innerHTML = '<a href="#" onclick="showHidespecall(this,\'show\'); return false" title="View Details">View Details</a>';
}
}



</script>

</head>


<body>






<div id="specialsID1_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec1(this,'show'); return false" title="View Details">View Details</a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID1">
Text1 Text1 Text1
</div>




<br><br>


<div id="specialsID2_Div" align=left><a href="#" style="cursor:pointer;" onclick="showHidespec2(this,'show'); return false" title="View Details">View Details</a></div>

<div style="display:none;font-weight:normal;padding-top:10px;padding-bottom:5px;" id="specialsID2">
Text2 Text2 Text2
</div>




<br><br><br>



<div id="all" align=left><a href="#" style="cursor:pointer;" title="VIEW ALL" onclick="showHidespecall(this,'show');">VIEW ALL</a> (clicking shows both hidden "View Details" divs above)</div>







</body>
</html>


Give That A Try

patsol
01-06-2007, 01:33 AM
6arredja, that worked perfectly...you da man! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum