www.webdeveloper.com
Results 1 to 3 of 3

Thread: Illusion of Windows Explore expand/collapse

  1. #1
    Join Date
    Jan 2003
    Posts
    53

    Illusion of Windows Explore expand/collapse

    I am using the following code to expand/collapse a section of text on a page I'm writing. (Trying to create the illusion of expanding/collapsing in Windows Explore, so its more intuitive.) It starts with an image of a "+" to the left of it, and changes to an image of a "-" when you click on it. (And also puts some text in a table below it.) I can click on either the "+" image or the text of the tip to "expand" it. The problem is that I can't double-click on the "-" image to collapse it again - I have to double-click on the tip instead. I tried putting a span tag around the image in the tip, but that doesn't seem to be doing anything, good or bad. Does anyone know how to write this so that you can double-click (or better yet, just click) on the minus.gif image to make it "collapse" after its been "expanded"?


    var linktext=new Array()
    linktext[0]="Here is the text."

    linktext[1]="<span id='text1' onClick=“resetit('div1');show_text(2,'div2')”><img src='Images/minus.gif' width=9 height=9 border=0 align=absmiddle></span> "

    linktext[2]="<img src='Images/plus.gif' width=9 height=9 border=0 align=absmiddle> "

    var ns3=document.getElementById&&!document.all
    var ie=document.all

    function show_text(thetext, whichdiv){
    if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
    else if (ns3) document.getElementById(whichdiv).innerHTML=linktext[thetext]
    }

    function resetit(whichdiv){
    if (ie) eval("document.all."+whichdiv).innerHTML=' '
    else if (ns3) document.getElementById(whichdiv).innerHTML=' '
    }

    </script>
    <!-- show_text(index# of linktext[] to show, ID of div to write to) -->
    <span id="tip1" onClick="show_text(0,'div1');show_text(1,'div2')" onDblClick="resetit('div1');show_text(3,'div2')"><font color="blue"><span id="div2"><img src="Images/plus.gif" width="9" height="9" align=absmiddle border=0> </span>Here is the tip.</font></span>
    <table width=97%>
    <tr>
    <td width="2%"> </td>
    <td width="98%"><span id="div1"> </span></td>
    </tr>
    </table>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>expanding and collapsing menu and content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    //<![CDATA[
    <!--
    function Toggle(who, num) {
    // menu or content
    var obj, sign;
    if(who=='m') {	//menu
    	obj=document.getElementById('menu'+num);
    	sign=document.getElementById('m'+num);
        }
    else {	//content
    	obj=document.getElementById('info'+num);
    	sign=document.getElementById('s'+num);
        }
    // expand or collapse
    if(obj.className=='expanded') {
    	obj.className='collapsed';
        sign.innerHTML='+';
        }
    else {
    	obj.className='expanded';
        sign.innerHTML='-';
        }
    }
    
    // Find all elements in a container with class='expanded' and change  to 'collapsed'
    function CollapseContent(IDcontainer, Tag, IDprefix) {
    var IDnum, n_elms, elms=document.getElementById(IDcontainer).getElementsByTagName(Tag); 
    n_elms = elms.length;
    for (var i=0; i < n_elms; i++) {
    	if(elms[i].getAttributeNode('class').value=='expanded') {
        	IDnum=elms[i].getAttributeNode('id').value.split(IDprefix);
            Toggle(IDcontainer.charAt(0), IDnum[1]);
            }
    	}
    }
    onload=function () {
    CollapseContent('content', 'dd', 'info');
    CollapseContent('menu', 'ul', 'menu');
    // open a menu
    if(location.search) {
    	var ToOpen=location.search.split('=');
        Toggle('m', ToOpen[1]);
        }
    }
    //-->
    //]]>
    </script>
    
    <style type="text/css">
    <!-- 
    h1 {
    	text-align:center;
        border-bottom:2px solid #06f;
        background:#ccc;
        color:#000;
        }
    #container {
    	width:80%;
        border:2px solid #06f;
        background:#9cf;
        color:#000;
        } 
    #menublock {
    	float:left;
        width:10em;
        }
    #menu {
    	list-style-type:none;
        }
    #content {
    	float:left;
        margin-left:10px;
        }
    li span, dt span {
    	font-family:"Courier New", Courier, monospace;
        padding:0 5px;
    	}
    .sign {
    	cursor: pointer;
        color: blue;
        text-decoration : none;
    	}
    .expanded {display:block;}
    .collapsed {display:none;}
    -->
    </style>
    
    </head>
    <body>
    <div id="container">
    	<h1>header</h1>
       <div id="menublock">
        	<h2>menu</h2>
        	<ul id="menu">
                <li id="li1" onclick="Toggle('m', '1');" class="sign"><span id="m1">-</span>link 1
                    <ul id="menu1" class="expanded">
                        <li><a href="http://www.mysite.com/?m=1">link 1.1</a></li>
                        <li><a href="http://www.mysite.com/?m=1">link 1.2</a></li>
                    </ul>
                </li>
                <li id="li2" onclick="Toggle('m', '2');" class="sign"><span id="m2">-</span>link 2
                    <ul id="menu2" class="expanded">
                        <li><a href="http://www.mysite.com/?m=2">link 2.1</a></li>
                        <li><a href="http://www.mysite.com/?m=2">link 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="content">
    		<h2>content</h2>
        	<dl>
    			<dt id="dt1" onclick="Toggle('c', '1');" class="sign"><span id="s1">-</span>Headline 1</dt>
                <dd id="info1" class="expanded">content 1</dd>
    			<dt id="dt2" onclick="Toggle('c', '2');" class="sign"><span id="s2">-</span>Headline 2</dt>
                <dd id="info2" class="expanded">content 2
                	<dl>
                        <dt id="dt2.1" onclick="Toggle('c', '2.1');" class="sign"><span id="s2.1">-</span>Headline 2.1</dt>
                        <dd id="info2.1" class="expanded">content 2.1
    						<dl>
                                <dt id="dt2.1.1" onclick="Toggle('c', '2.1.1');" class="sign"><span id="s2.1.1">-</span>Headline 2.1.1</dt>
                                <dd id="info2.1.1" class="expanded">content 2.1.1</dd>
                			</dl>
                        </dd>
                	</dl>
                </dd>
    		</dl>
        </div>
        <div style="clear:both;"></div>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Jan 2003
    Posts
    53
    Thanks Fang, you're awesome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles