...

View Full Version : problem with a show/hide toggle thing (JS)



belledumonde
08-27-2006, 08:29 AM
original script (http://www.tjkdesign.com/articles/toggle_elements.asp) // modified script (http://hribar.info/en/archive/78/entrie.html) // modified script in action (http://hribar.info/static/projects/tjk_toggle/default.html)

problem ==> loses this important feature:

It degrades nicely (hidden elements are visible in script-disabled UAs).

if you view the modified script with JS disabled, it just comes out as a list with no way to view the <dd> contents. the original one however comes out best with all <dd>'s displayed, <dt>'s are not links, and there are no open all/close all links.

i took a look at the script which was pretty useless coz i have no idea what im looking at, so i'd really appreciate any help on this one.

and also it would really really great if someone could help and have an open all/close all for each <dl>, coz so far when i try to use the script, i can only have one pair of open all/close all links and they open/close everything instead of that one particular list under one heading.

thanks in advance!! :)

vwphillips
08-27-2006, 12:12 PM
this is easier with <DIV>s but may give you ideas



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<head>
<title></title>
<style type="text/css">
<!--
.cls1 {
width:100px;background-color:#FFCC66;background-image:url(http://www.vicsjavascripts.org.uk/StdImages/down[1].gif);background-repeat:no-repeat;background-position:right;
}
.cls2 {
width:100px;background-color:#FFFFCC;background-image:url(http://www.vicsjavascripts.org.uk/StdImages/up[1].gif);background-repeat:no-repeat;background-position:right;
}

-->
</style><script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (27-August-2006) - http://www.vicsjavascripts.org.uk

// Initialised by a <BODY> or window onload event call
// e.g.
// <body onload="zxcInitQA('section_0','cls1','cls2');zxcInitQA('section_1','cls1','cls2',true);" >
// where:
// parameter 0 = the unique ID name of the parent <DIV>. (string)
// parameter 1 = the class rule of the inactive question <DIV>. (string)
// parameter 2 = the class rule of the active question <DIV>. (string)
// parameter 3 = (optional) will hide all other answer <DIV>s. (true or omit)
//


function zxcInitQA(zxcid,zxccls1,zxccls2,zxctog){
var zxcobj=document.getElementById(zxcid);
var zxcchlds=zxcobj.childNodes;
zxcobj.ary=[[zxcid,zxccls1,zxccls2,zxctog]];
var zxcary=[]
for (var zxc0=0;zxc0<zxcchlds.length;zxc0++){
if (zxcchlds[zxc0].tagName=='DIV'){
zxcary.push(zxcchlds[zxc0]);
}
}
for (var zxc1=1;zxc1<zxcary.length;zxc1+=2){
if (zxcary[zxc1].tagName=='DIV'){
zxcobj.ary.push([zxcary[zxc1-1],zxcary[zxc1]]);
zxcary[zxc1].style.display='none';
zxcAddEvt(zxcary[zxc1-1],'zxcToggleQA','click');
zxcary[zxc1-1].className=zxccls1;

}
}
}

function zxcToggleQA(){
var zxcary=zxcFndAry(this);
if (!zxcary){ return; }
for (var zxc0=1;zxc0<zxcary.length;zxc0++){
if (zxcary[zxc0][0]==this){
zxcary[zxc0][1].style.display=(zxcary[zxc0][1].style.display=='none')?'':'none';
zxcary[zxc0][0].className=(zxcary[zxc0][0].className==zxcary[0][1])?zxcary[0][2]:zxcary[0][1];
}
}
if (zxcary[0][3]){
for (var zxc1=1;zxc1<zxcary.length;zxc1++){
if (zxcary[zxc1][0]!=this){
zxcary[zxc1][1].style.display='none';
zxcary[zxc1][0].className=zxcary[0][1];
}
}
}
}

function zxcQAAllNone(zxcid,zxcan){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj){ return; }
var zxcary=zxcobj.ary;
if (!zxcary){ return; }
for (var zxc0=1;zxc0<zxcary.length;zxc0++){
zxcary[zxc0][1].style.display=zxcan||'';
zxcary[zxc0][0].className=(zxcary[zxc0][1].style.display=='')?zxcary[0][2]:zxcary[0][1];
}
}

function zxcFndAry(zxcobj){
while (zxcobj.parentNode){
if (zxcobj.ary){ return zxcobj.ary; }
zxcobj=zxcobj.parentNode;
}
return false;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}


//-->
</script>

</head>

<body onload="zxcInitQA('section_0','cls1','cls2');zxcInitQA('section_1','cls1','cls2',true);" >
<h3>Section #1</h3>
<span onclick="zxcQAAllNone('section_0','');" >All</span> | <span onclick="zxcQAAllNone('section_0','none');" >None</span>
<div id="section_0">
<div>Question #1</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #2</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #3</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>

<div>Question #4</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #5</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
</div>

<h3>Section #2</h3>
<span onclick="zxcQAAllNone('section_1','');" >All</span> | <span onclick="zxcQAAllNone('section_1','none');" >None</span>
<div id="section_1">
<div>Question #1</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #2</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #3</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>

<div>Question #4</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #5</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
</div>


</body>

</html>


Edit - add Instructions and additional option

belledumonde
08-27-2006, 12:23 PM
whoah, i have no idea what any of that means. but i'll try and look through it.

im little against using divs for this coz its semantically empty. whats the difference between between the original script and the modified one that makes the modified one not "degrade" properly?

if i wanted a show all/hide all thing for each section, would it not work with <dl>?

thanks! :)

vwphillips
08-27-2006, 12:45 PM
I cant see a lot of difference


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--
.sub {
position:relative;width:95%;left:30px;
}

-->
</style></head>

<body>
<h3>Section #1</h3>

<dl id="section_0">
<dt>Question #1</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</dd>
<dt>Question #2</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</dd>
<dt>Question #3</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</dd>

<dt>Question #4</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</dd>
<dt>Question #5</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</dd>
</dl>
<h3>Section #1</h3>
<span onclick="zxcQAAllNone('section_0','');" >All</span> | <span onclick="zxcQAAllNone('section_0','none');" >None</span>

<div id="section_0">
<div>Question #1</div>
<div class="sub" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #2</div>
<div class="sub">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #3</div>
<div class="sub">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>

<div>Question #4</div>
<div class="sub">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
<div>Question #5</div>
<div class="sub">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vehicula, nisl non condimentum mollis, turpis magna tincidunt nunc, nec rhoncus turpis nisl eget neque. Donec sit amet ligula sit amet lectus faucibus auctor. Aenean eu elit at massa tincidunt consequat. Quisque quam nulla, sagittis ut, tristique eu, ullamcorper a, tellus. Fusce tristique. Nulla tristique, magna sit amet convallis faucibus, magna orci consequat neque, in pellentesque lectus odio at augue. Mauris eu elit vitae risus bibendum sollicitudin. Integer turpis. Cras lobortis. Maecenas placerat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque nonummy. Nulla facilisi. Etiam suscipit.</div>
</div>


</body>

</html>


would it not work with <dl>?

may look later

+ note the edit on my first post



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum