[thelist] Adding an indicator to collapsable content

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


Richard,

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:

http://mwarden.f2o.org/sandbox/collapsible_elements.htm

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.appendChild(document.createTextNode('Expand/Collapse'));
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'));

or

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

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

hth,

-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.


More information about the thelist mailing list