[thelist] Adding an indicator to collapsable content

Matt Warden mwarden at gmail.com
Sun Jan 30 15:12:34 CST 2005


On Sun, 30 Jan 2005 18:23:47 +0100, Richard Harb <rharb at earthling.net> wrote:
> Without having a solution in code I think the following might work:
> <div class="container">
> <p id="desc">[+] Click here ...</p>
> <div class="stuff-to-hide">
> ...
> </div>

It would be better if he added this node with Javascript, since the
collapsing will only work for those who have Javascript turned on.

As for a solution, Dave, there was actually one in the script I
pointed you to before. See:


I realize it might be a little difficult to read through, if you
aren't that familiar with JS. Here's where I'm adding the node:

// insert the expand/collapse node before this child div
var p=document.createElement('p');
p.className = 'collapsetrigger';
eval("p.onclick = function(){toggleExpanded('a"+ i +"_"+ j +"');}");
divs[i].insertBefore(p, childdivs[j]);

You probably do not need the eval(). That is there because I have no
idea in my situation how many collapsible elements are on the page
this script is handling.

childdivs[j] is a reference to the div that is collapsible. In my
instance, the collapsible div and this paragrahp I am inserting are
both in a container div. You will probably want omethign like this too
(that way, you can maintain a container when the collapsible div is
collapsed. It is not necessary, though.

For your purpose, you would make a slight change. You would probably
end up with something like this:

// insert the expand/collapse node before this child div
var p=document.createElement('p');
p.appendChild(document.createTextNode('[-] collapse'));
p.className = 'collapsetrigger';
p.onclick = function(){toggleExpanded('idOfCollapsibleDiv');};
divs[i].insertBefore(p, childdivs[j]);

Then, in your toggleExpanded method, you will need to remove the text
node with p.removeChild(textNodeReference); and append a new text node
child, which either is:

p.appendChild(document.createTextNode('[+] expand'));


p.appendChild(document.createTextNode('[-] collapse'));

depending on whether you are collapsing or expanding the div, respectively.


Matt Warden
Miami University
Oxford, OH, USA

This email proudly and graciously contributes to entropy.

More information about the thelist mailing list