Let's say I have dynamically rendering DIV's that contain one H as the menubar, and a SPAN as the contents. When clicking the H, the SPAN will appear (Display: "") - and clicking it again will hide it (Display: none).
Hopefully this has a simple answer, I tried searching google but I don't think my terms are returning what I'm looking for... (Like [get object triggered javascript] or [triggering object javascript] etc)
I found a few examples online but they all involve preset id's or arrays which in theory would work but I would find the "Triggering Object" would be much more useful for many things.
Heres one example that has no demonstration, and I can't seem to get it to work.
Heres another example that seemed to be more useful, but is not independent of each other.
(Edit) I had high hopes for this example, but it doesn't seem to work in Firefox. I'm thinking the event.srcObject does not work in Firefox... Its working in IE!
And heres a quick snippet that, if you can get it to work or tell me what I'm looking for, I will greatly appreciate. The goal is not to use object ID's and not to affect other H3's (Only ones included by the .collapsible)
PHP Code:
<style type="text/css">
.collapsible {background-color: #666; padding: 0px; border: 3px #AAA double;}
.collapsible h3 {color: #FC0; font-weight: bold; background-color: #888; margin: 0px; padding: 2px 6px;}
.collapsible h3:hover {background-color: #AAA; cursor:;}
.collapsible p {color: #FFF; margin: 0px; padding: 5px 10px 10px 10px;}
</style>
<div style="width: 300px; margin: 0 auto;">
<div class="collapsible">
<h3 onclick="collapse()">Headline</h3>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
</div>
<hr width="200">
<div class="collapsible">
<h3 onclick="collapse()">Headline 2</h3>
<p style="display: none;">This should be hidden by default</p>
</div>
</div>
Last edited by RadGH : 03-31-2008 at 01:15 AM.
|
