[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