[RESOLVED] Hide/show or expand/collapse javascript.

@topclassJul 23.2008

Hi all

I’m very new to javascript found a bit of code that almost does what I want, I say almost.. I have spent the day trying out different code and open to something that does the job but kinda become attached to this.

OK I need a script that will control at least 3 different CSS styles of expand/collapse. Think of it as 3 webpages of FAQs on one site, each with a different style, so each would have unlimited entries.

The closest to what I want is offered on ~~[url]~~http://jdstiles.com/java/expanding/qa.html[/url]. But here is the code

Java:

Code:

[CODE]var ids=new Array();

function QAinit(){ if(document.getElementById){ var tids=document.getElementsByTagName(‘div’); for(i=0;i<tids.length;i++)if(tids[i].className==”question”)ids[ids.length]=tids[i]; for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate; }}

function setstate(){ for(i=0;i<ids.length;i++){ if(ids[i]==this){ var d=this.parentNode.getElementsByTagName(‘div’)[1]; if(d.style.display==”block”)d.style.display=”none”; else d.style.display=”block”; }}}

function expandall(){ if(document.getElementById){ for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName(‘div’)[1].style.display=”block”; }}

function collapseall(){ if(document.getElementById){ for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName(‘div’)[1].style.display=”none”; }}

window.onload=QAinit;[/CODE]

Basic html
Code:

[CODE]<div class=”primary-container”><!–1st container–> <div class=”pri-question”> Your first question goes here… </div> <div class=”pri-answer”> <p>Lorem ipsum dolor sit</p> </div> </div></div><!–./1st container–>[/CODE]

The best I could do was put the two class names together in line 6 … className==”pri-question”, “question”) which resulted in ~~[url]~~http://www.fuzzy-art.com/drop/[/url] which works but the top div gets knocked off .

Many thanks
Cliff

PS it would be a bonus to get it all to expand all if javascript has been turned off in the browser.

to post a comment

JavaScript

9 Comments(s) _↴

@FangJul 23.2008 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;show and hide&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 var aDT=document.getElementsByTagName('dt');
 for(var i=0; i&lt;aDT.length; i++) {
 if (aDT[i].addEventListener) { // W3C
 aDT[i].addEventListener('click', function() {hideAll(this.nextSibling.nextSibling);}, false);
 }
 else {
 aDT[i].onclick=function() {hideAll(this.nextSibling);};
 }
 aDT[i].style.cursor='pointer';
 }
 hideAll();
 buttons();
 }
 
 var txt=['hide all', hideAll, 'show all', showAll];
 function buttons() {
 var parent=document.createElement('div');
 document.body.appendChild(parent);
 for(var i=0; i&lt;txt.length; i+=2) {
 var o=document.createElement('button');
 o.setAttribute('type', 'button');
 o.onclick=new Function('txt['+i+'+1]()');
 o.appendChild(document.createTextNode(txt[i]));
 parent.appendChild(o);
 }
 }
 
 function hideAll(dt) {
 var aDD=(dt)? dt.parentNode.getElementsByTagName('dd') : document.getElementsByTagName('dd');
 for(var i=0; i&lt;aDD.length; i++) {
 if(aDD[i]!=dt) {aDD[i].style.display='none';}
 }
 if(dt) {dt.style.display=(dt.style.display=='none')? '' : 'none';}
 }
 
 function showAll() {
 var aDD=document.getElementsByTagName('dd');
 for(var i=0; i&lt;aDD.length; i++) {
 aDD[i].style.display='';
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 dl {width:15em;}
 dt {font-weight:bold;margin-top:2px;}
 dd {margin:0;padding:0.5em;}
 #group1 dt {color:#000; background:#c9f;}
 #group1 dd {border:1px dotted #c9f;}
 #group2 dt {color:#000; background:#09c;}
 #group2 dd {border:1px dotted #09c;}
 #group3 dt {color:#000; background:#6c6;}
 #group3 dd {border:1px dotted #6c6;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h2&gt;Group 1&lt;/h2&gt;
 &lt;dl id="group1"&gt;
 &lt;dt&gt;History&lt;/dt&gt;
 &lt;dd&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.&lt;/dd&gt;
 &lt;dt&gt;News&lt;/dt&gt;
 &lt;dd&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;h2&gt;Group 2&lt;/h2&gt;
 &lt;dl id="group2"&gt;
 &lt;dt&gt;History&lt;/dt&gt;
 &lt;dd&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.&lt;/dd&gt;
 &lt;dt&gt;News&lt;/dt&gt;
 &lt;dd&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;h2&gt;Group 3&lt;/h2&gt;
 &lt;dl id="group3"&gt;
 &lt;dt&gt;History&lt;/dt&gt;
 &lt;dd&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.&lt;/dd&gt;
 &lt;dt&gt;News&lt;/dt&gt;
 &lt;dd&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@topclassauthorJul 23.2008 — #Spot on Fang, thats perfect. ?

@topclassauthorJul 24.2008 — #Actually… there is just one thing that would make this perfect :o .

After playing around a bit I’m finding the expansion of one box closing another could be a bit irritating for the user experience, if there is a lot of text the whole page will jump requiring some extra eye and mouse action.

I tried to hack around with the script and the best I could do was http://www.fuzzy-art.com/meerkat/ but it only holds the first answer open. I quite like the fact the first answer is open by default as this gives the user and idea of the format.

Any help would be greatly appreciated

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>show and hide</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <script type="text/javascript">
 window.onload=function() {
 var aDT=document.getElementsByTagName('dt');
 for(var i=0; i<aDT.length; i++) {
 if (aDT[i].addEventListener) { // W3C
 aDT[i].addEventListener('click', function() {hideAll(this.nextSibling.nextSibling);}, false);
 }
 else {
 aDT[i].onclick=function() {hideAll(this.nextSibling);};
 }
 aDT[i].style.cursor='pointer';
 }
 hideAll();
 }
 
 var txt=['hide all', hideAll, 'show all', showAll];
 function buttons() {
 var parent=document.createElement('div');
 document.body.appendChild(parent);
 for(var i=0; i<txt.length; i+=2) {
 var o=document.createElement('button');
 o.setAttribute('type', 'button');
 o.onclick=new Function('txt['+i+'+1]()');
 o.appendChild(document.createTextNode(txt[i]));
 parent.appendChild(o);
 }
 }
 
 function hideAll(dt) {
 var aDD=(dt)? dt.parentNode.getElementsByTagName('dd') : document.getElementsByTagName('dd');
 for(var i=1; i<aDD.length; i++) {
 if(aDD[i]!=dt) {aDD[i].style.display='none';}
 }
 if(dt) {dt.style.display=(dt.style.display=='none')? '' : 'none';}
 }
 
 function showAll() {
 var aDD=document.getElementsByTagName('dd');
 for(var i=0; i<aDD.length; i++) {
 aDD[i].style.display='';
 }
 }
 </script>
 
 <style type="text/css">
 dl {width:15em;}
 dt {font-weight:bold;margin-top:2px;}
 dd {margin:0;padding:9px;}
 #group1 dt {color:#000; background:#c9f; width: 600px;}
 #group1 dd {border:1px dotted #c9f;}
 #group2 dt {color:#000; background:#09c;}
 #group2 dd {border:1px dotted #09c;}
 #group3 dt {color:#000; background:#6c6;}
 #group3 dd {border:1px dotted #6c6;}
 .faq {float: left; width: 600px; margin:0 0 0 20px; padding: 0 15px;}
 .faq dd {width: 580px;}
 .glossary {float: right; width: 250px; margin:0 20px 0 0; padding: 0 15px;}
 #footer {clear: both; height: 100px; background: #DEB887; border-top: 1px solid #333;}
 </style>
 
 </head>
 <body>
 <div class="faq">
 <h2>FAQs</h2>
 <a href="javascript:showAll()">Expand All</a>
 <a href="javascript:hideAll()">Collapse All</a>
 <dl id="group1">
 <dt>History</dt>
 <dd><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.</p><p>Curabitur bibendum. Nunc non ipsum ac felis auctor commodo. Mauris sollicitudin porta risus. Nullam eu velit laoreet urna scelerisque blandit.</p></dd>
 <dt>News</dt>
 <dd><p>Nunc porta nulla id velit. Aliquam ut purus. Sed placerat purus in nulla. In eu nisi et purus ultrices lobortis. Quisque eget est in neque tristique sagittis.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p></dd>
 <dt>Weather</dt>
 <dd><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.</p>
 <p>Cras lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec commodo tempus nunc. Morbi viverra laoreet orci. Praesent mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></dd>
 <dt>Sport</dt>
 <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.</p></dd>
 <dt>Whatever</dt>
 <dd><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis. Lorem ipsum dolor sit amet.</p></dd>
 </dl>
 </div><!--./faq-->
 
 <div class="glossary">
 <h2>Glossary</h2>
 <dl id="group2">
 <dt>History</dt>
 <dd>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis.</dd>
 <dt>News</dt>
 <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</dd>
 </dl>
 </div><!--./glossary-->
 
 <div id="footer">
 This is the footer
 </div>
 
 
 </body>
 </html>[/CODE]

@FangJul 24.2008 — #

hideAll();
 // open first question
 document.getElementsByTagName('dd')[0].style.display='';
 // or in a specific block
 // document.getElementById('group1')getElementsByTagName('dd')[0].style.display='';
 buttons();

@topclassauthorJul 24.2008 — #Thanks fang but Im unsure of how to implement this

@FangJul 24.2008 — #

window.onload=function() {
 var aDT=document.getElementsByTagName('dt');
 for(var i=0; i&lt;aDT.length; i++) {
 if (aDT[i].addEventListener) { // W3C
 aDT[i].addEventListener('click', function() {hideAll(this.nextSibling.nextSibling);}, false);
 }
 else {
 aDT[i].onclick=function() {hideAll(this.nextSibling);};
 }
 aDT[i].style.cursor='pointer';
 }
 hideAll();
 // open first question
 document.getElementsByTagName('dd')[0].style.display='';
 // or in a specific block
 // document.getElementById('group1')getElementsByTagName('dd')[0].style.display='';
 buttons();
 }

@topclassauthorJul 24.2008 — #I really appreciate your help Fang but I am pretty lost with this. I have tried to paste the new code into a few places but it just seems to break the script.

Basically I’d like the first answer to show, but hides on a click like all others. And all others show/hiding on a click.

@FangJul 24.2008 — #? The first answer is visible when the page opens. That is the intention isn't it?

@topclassauthorJul 24.2008 — #Hi yes, and apologies for being a bit thick. Initially it didn't work due to some other edit I had tried and forgotten to revert back then I was trying to figure out how the mod stopped the answers auto closing, ie only closing with a click on it's question. But realised your mod only dealt with the show first question

Also in #JavaScript _↴

newbie need help about popup exit!!Retrieve URL parameter value and set as variable what is wrong with my redirect ?

Success!

Help @topclass spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Hide/show or expand/collapse javascript.

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Hide/show or expand/collapse javascript.

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴