asked on

Javascript to open and close Divs one at a time

I have the following script. It closes and opens Divs onClick. However, I want only one Div open at a time. If I click on the first link, it opens and if I click on the second link it opens also. Here is what I have:

<script>
function showOrHide(linkElem)
{
        var rel = linkElem.getAttribute('rel');
        var divElem = document.getElementById(rel);
        var divGrp = divElem.getAttribute('name');
        var aInGrp = document.getElementsByTagName('A');
        var divInGrp = document.getElementsByTagName('DIV');

        // reset all elements in the same group
        for (i = 0; i < aInGrp.length; i++)
        {
                elm = aInGrp[i];
                if (elm.getAttribute('collapsible') == "yes" && elm.getAttribute('rel') != rel)
                {
                        elm.innerText = 'Expand';
                }
        }
        for (i = 0; i < divInGrp.length; i++)
        {
                elm = divInGrp[i];
                if (elm.getAttribute('collapsible') == "yes" && (elm.getAttribute('id') != rel))
                {
                        elm.style.display = 'none';
                }
        }

        if (divElem.style.display == 'none')
        {
                divElem.style.display = 'block';
                linkElem.innerText = "Collapse";
        }
        else
        {
                divElem.style.display = 'none';
                linkElem.innerText = "Expand";
        }
}
</script>


<ul>
<li class="text"><a href="#" style="collapsible:yes;" name="portfolio" rel="galleryFenderCont" onclick="showOrHide(this, 'galleryFenderCont');return false;">AAA</a><br /></li>
			
<li class="text"><a href="#" style="collapsible:yes;" name="portfolio" rel="gallerySteinCont" onclick="showOrHide(this, 'gallerySteinCont');return false;">BBB</a><br /></li>
</ul>


<div id="galleryFenderCont" name="portfolio" style="display:none;collapsible:yes;">
CONTENT HERE
</div>

<div id="gallerySteinCont" name="portfolio" style="display:none;collapsible:yes;">
CONTENT HERE
</div>

Open in new window

COBOLdinosaur

This is messy. Why are you using thr rel. Your script is only looking at one parameter and the function call is passing 2 parameters. You don't need the first one. You just use it to get the value that you are passing in the second parameter.

I doubt that you need all the digging and messing around. You have the id of the target; so just execute show it or hide it. To close a previously opened one just save it in an variable after you show it then when you open another one close the one that is already open.

You have at least twice as much code as you need for what should be a simple function. Keep is simple and it won't jump up and bite you.

Cd&

Robert Granlund

ASKER

@COBOLdinosaur

I'm a real novice with Javsascript and have pieces this together from code I have found. Can you give me an example of what you mean by:

"To close a previously opened one just save it in an variable after you show it then when you open another one close the one that is already open."

COBOLdinosaur

Right at the begining of the script before the function you create a global variable.

var lastdiplayed=false;

now in the function after you have displayed the element with:
divElem.style.display = 'block';
you still have the handle in divElem so:

if (lastdisplayed) // if something is already displayed
{
lastdisplayed.style.display='none'; //now it is hidden
}
lastdisplayed=divElem; //now you have saved the handle for the next display

if you need to save the link you can do it the same way just save the handle

BTW... don't worry about being a novice. We all have to start from the same spot, and you will find that it gets pretty easy after a little practice and experimentation.

Cd&

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial