PDA

View Full Version : Help with expand/collapse accordion style javascript



optimus203
09-02-2008, 03:25 AM
Hey everyone. I am a fresh newbie to this forum. I was hoping someone can help me complete the following JS code to fulfill the needs for one of my sites. Currently, this code shows a hidden div containing content. The only problem is that it doesn't collapse the content upon clicking a new link. You have to manually click the original link a second time to collapse the content. Does anyone know how I can finish this code so that content1 will automatically collapse when content2 is called??? Here is the code:

JS
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

Related HTML (<p>idname = a general file name for each link)
<input type="button" class="button" onclick="return toggleMe('<p>idname')" value="<p>idname" />
<div id="<p>idname" style="display:none">

Here is the link to the page in question. The top 4 links in the right nav have the expand command working, and manual collapse command working.
http://www.db-elements.com/ahimsa/blake_babies/index_w_js2.html

Any ideas are greatly appreciated. Thanks in advance.

Dave

abduraooft
09-02-2008, 05:59 AM
Validate your markup and fix all errors first, see http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.db-elements.com%2Fahimsa%2Fblake_babies%2Findex_w_js2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

rangana
09-02-2008, 08:45 AM
For your problem, try to add highlighted:


function toggleMe(a){
var e=document.getElementById(a);
for(var i=0,divs=document.getElementById('containerLyrics').getElementsByTagName('div');i<divs.length;i++)
divs[i].style.display='none';
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}


Hope it helps.

optimus203
09-03-2008, 12:41 AM
Yes rangana! That works perfectly, from what I can see. Thanks so much for your help in resolving this matter. All the other solutions people presented on other forums were a lot more work than this addition of your. I'm been trying to wrap my head around the easiest way to approach this issue, and this is it. Respectfully, Dave