You don't have the image in your html. Logic Ali has provided a really great toggle function, put in image and this will work great for you.
Here is what i use (I will be implementing Logic ALi's toggle function instead of what i have, will post it as soon as it is done) . Please pay special attention to the name of the img and the content div tag id.
Code:
<div>
<a href="javascript:showhideOnClick('divNAME1')">
<img border="0" src="btn_action_minus.gif" alt="toggle" name="picNAME1"></a> My Header
<div>
<div id="divNAME1">MY CONTENT</div>
when i need to show hide the content div programatically at load time i call the function as (if you are always showing your content then you don't have to do this):
Code:
<script language="javascript">
<!--
showhideWhileLoading('NAME1',0); //1 is to show, 0 is to not show
//-->
</script>
i have placed my 2 functions showhideOnClick and showhideWhileLoading in the js file.
here are those 2
Code:
//show hide blocks
var picShowHideMinus = new Image();
var picShowHidePlus = new Image();
picShowHideMinus.src = 'btn_action_minus.gif';
picShowHidePlus.src = 'btn_action_plus.gif';
function showhideWhileLoading(CAT,nShow){
var objCat = document.getElementById('div'+CAT);
var objPic = document.getElementById('pic'+CAT);
// n = 0 = not show
// n = 1 = show
if(objCat && objPic){
if(nShow == 1){
objCat.style.display="";
objPic.src = picShowHideMinus.src;
}else{
objCat.style.display="none";
objPic.src = picShowHidePlus.src;
}
}
}
function showhideOnClick(CAT) {
var objCat = document.getElementById("div"+CAT);
var objPic = document.getElementById("pic"+CAT);
if(objCat && objPic){
if (objCat && objCat.style.display=="none") {
objCat.style.display="";
objPic.src = picShowHideMinus.src;
}
else {
objCat.style.display="none";
objPic.src = picShowHidePlus.src;
}
}
}
i have ensured in my php script which generates the host html, that my img and div tag ids are numbered sequentially.
my question is how do i loop through the page in javascript to ascertain how many divs i have and then react accordingly in the function?
inside the <head> tag define a variable like
Code:
<script language="javascript">
<!--
var nTotalDivs = 0;
//-->
</script>
once you have created all the divs, you know how many divs were created, so the last thing assign this number to nTotalDivs, i am using ASP syntax.
Code:
<script language="javascript">
<!--
nTotalDivs = parseInt(<%=MyTotalDivs%>);
//-->
</script>
Now on the page you know how many divs you have. Some one can also show you how to do this via dom/elements.
Use it like Logic Ali has shown it
Code:
for(var i=0; i<nTotalDivs; i++){
//do processing here
}
Originally Posted by lukemack
Bookmarks