The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Classic Div Toggle, ...with a twist I can't seem to figure out...
Duchess
post Jan 6 2010, 04:26 PM
Post #1





Group: Members
Posts: 5
Joined: 6-January 10
Member No.: 10,781



I have the following:

CODE
function showdiv(name,focus){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
    if (obj.style.display=="none"){
        obj.style.display="";
    }else{
        obj.style.display="none";
    }
}

<div align="left"><a onClick="showdiv('div1');" style="cursor: pointer;">DIV 1</a></div>
<div id="div1" style="display: none;">DIV CONTENT</div>

<div align="left"><a onClick="showdiv('div2');" style="cursor: pointer;">DIV 2</a></div>
<div id="div2" style="display: none;">DIV CONTENT</div>


This is the classic JavaScript solution to toggling a div, and it handles multiple divs. It works fine.

What I'm trying to do is advance it a level by making it so only one div shows at a time. In otherwords, I click the link, it shows the div. I click it again, it goes away. This works. I click that link again, it shows the div again. I click the other link now, the first div goes away and the second div shows up instead. So on and so forth.

I tried doing this:

CODE
function showdiv(name1,name2,focus){
var obj1 = (document.getElementById)? document.getElementById(name1) : eval("document.all[name1]");
var obj2 = (document.getElementById)? document.getElementById(name2) : eval("document.all[name2]");
    if (obj2.style.display==""){
        obj2.style.display="none";
    }
    if (obj.style.display=="none"){
        obj.style.display="";
    }else{
        obj.style.display="none";
    }
}

<div align="left"><a onClick="showdiv('div1,div2');" style="cursor: pointer;">DIV 1</a></div>
<div id="div1" style="display: none;">DIV CONTENT</div>

<div align="left"><a onClick="showdiv('div2,div1');" style="cursor: pointer;">DIV 2</a></div>
<div id="div2" style="display: none;">DIV CONTENT</div>


Is this just too simple to be true?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Jan 7 2010, 08:22 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Duchess @ Jan 6 2010, 10:26 PM) *

CODE
function showdiv(name,focus)


The "focus" argument doesn't seem to be used for anything.

QUOTE
CODE
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");

That looks terribly ancient, I recall document.all was necessary for IE4. Today "all" browsers support document.getElementById.

QUOTE

What I'm trying to do is advance it a level by making it so only one div shows at a time. In otherwords, I click the link, it shows the div. I click it again, it goes away. This works. I click that link again, it shows the div again. I click the other link now, the first div goes away and the second div shows up instead. So on and so forth.

I rewrote both the script and the HTML. ninja.gif This way it's meant to work with any number of DIVs. Haven't tested it much, though. I don't use link elements for the labels, since such links tend to annoy users without javascript, instead I create BUTTON elements (with javascript) so that users can open the DIVs with their keyboard too (not just the mouse). If you don't like the look of buttons you might change their appearance with CSS. The script must appear after the DIVs.


CODE
<div class="toggle">DIV 1
    <div>DIV CONTENT 1</div>
</div>

<div class="toggle">DIV 2
    <div>DIV CONTENT 2</div>
</div>

<script type="text/javascript">
function toggle(parent)
{
    for(var i=0; i<div.length; i++)
    {
        if(div[i].className=='toggle')
        {
            // make toggle button:
            if(div[i].firstChild.nodeName!='BUTTON')
            {
                var button=document.createElement('button');
                button.setAttribute('type', 'button');
                button.appendChild(div[i].firstChild);
                div[i].insertBefore(button, div[i].firstChild);
            }

            var child=div[i].getElementsByTagName('div')[0];
            
            // mark the parent of an opened DIV:
            div[i].state='';
            if(child.style.display=='block')
            {
                div[i].state='open';
            }
            
            child.style.display='none';
            
            div[i].onclick=function()
            {
                toggle(this);
            }
        }
    }
    
    if(parent)
    {
        var child=parent.getElementsByTagName('div')[0];
        if(child.style.display=='none' && parent.state!='open')
        {
            child.style.display='block';
        }
        else
        {
            child.style.display='none';
        }
    }
}
var div=document.getElementsByTagName('div');
toggle();
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:53 AM