I got asked about something similar on a forum not long ago I'll c&p my response here incase its of use to you:<br><br>Ok this isn't the quickest way to go about it but it allows you to use
classes to toggle visibility rather than applying the style directly.<br>
<br>
The most part of it is a butchered piece of prototype.js so if you are
using a library/framework with its own class handling methods you can
simply use them instead.<br>
<br>
Oh and this is in no way actually guaranteed to work - I've just
written this out quickly and it is completely 100% untested. Its only
meant as an idea incase you want to do something similar.<br>
<br>
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">Code:</div>
<pre class="alt2" dir="ltr" style="border: 1px inset ; margin: 0px; padding: 6px; overflow: auto; width: 640px; height: 498px; text-align: left;">/*<br>* Example usage: <br>* notice.toggle(id);<br>* notice.show
(id);<br>* notice.hide(id);<br>*/<br><br>notice={<br><br> hideClass"hide",<br> <br> toggle:function(id) {<br> if(this.hasClassName(id this.hideClass)) {<br> this.removeClassName(id this.hideClass);<br> } else {
<br> this.addClassName(id this.hideClass);<br> }<br> },<br> <br> show:function(id) {<br> this.addClassName(id this.hideClass);<br> },<br> <br> hide:function(id) {<br> this.removeClassName(id this.hideClass);<br> },<br>
<br> // Modified from prototype.js [ <a href="http://prototype.conio.net/">http://prototype.conio.net/</a> ]<br> hasClassName:function(id, cName) {<br> if(!document.getElementById(id)) return;<br> var elClass = document.getElementById
(id).className;<br> if (elClass.length == 0) return false;<br> if (elClass == cName || elClass.match(new RegExp("(^|\\s)" + cName + "(\\s|$)"))) return true;<br> return false;<br> },<br><br> addClassName: function(id, cName) {
<br> if(!document.getElementById(id)) return;<br> var el = document.getElementById(id);<br> if(!this.hasClassName(id, cName)) el.className = el.className + " " + cName;<br> },<br> <br> removeClassName:function(id, cName) {
<br> if(!document.getElementById(id)) return;<br> if(!this.hasClassName(id, cName)) return;<br> var el = document.getElementById(id);<br> var elClass = el.className;<br> if (elClass.length == 0) return;<br> var newClass = "";
<br> var classes = elClass.split(' ');<br> for(var i = classes.length-1; i >= 0; --i){<br> if(classes[i] != cName) newClass += classes[i] + " ";<br> }<br> var sp = /^\s*(.*?)\s*$/;<br> el.className
= newClass.replace(sp, "");<br> }<br>}</pre>
</div><br><br><div><span class="gmail_quote">On 1/12/07, <b class="gmail_sendername">Alex Turner</b> <<a href="mailto:Alex.Turner@project-network.com">Alex.Turner@project-network.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Dood,<br><br>I would place call onclick like this:<br><br><span class="click" onclick='toggleMe(this)'>Hide this content</span><br><br>Then the toggle event handler gets a reference to the node from which it was called and hence has no chance of ambiguity :-)
<br><br>The other way that is also easy - but messier - is the way I did the selectable rows in a table - see <a href="http://nerds-central.blogspot.com">nerds-central.blogspot.com</a><br><br>Cheers<br><br>AJ<br><br>Dr Alexander J Turner
<br>Project Network<br>+44 (0) 7917 065072<br>Con Call: 0870 241 3425/3342654#<br><br>________________________________<br><br>From: <a href="mailto:javascript-bounces@LaTech.edu">javascript-bounces@LaTech.edu</a> on behalf of Bill Moseley
<br>Sent: Thu 1/11/2007 23:57<br>To: <a href="mailto:javascript@LaTech.edu">javascript@LaTech.edu</a><br>Subject: [Javascript] Help with closures<br><br><br><br>Or I think this is a closure issue.<br><br>I have a really simple and common task (that I'm likely making hard), where I
<br>want to create a hide/show block.<br><br>So, the block of HTML looks basically like this:<br><br> <div class="hidable"><br><br> <div class="content"><br> <span class="click">Hide this content</span><br />
<br> content here<br> </div><br><br> <div class="hidden"><br> <span class="click">Show the content</span><br> </div><br><br> </div>
<br><br>So clicking on "Show" or "Hide", well shows or hides that block with<br>content.<br><br>The problem is when I have two of those blocks clicking on the "hide"<br>seems to get the right event but is hiding the wrong block.
<br><br>Here's a working demo:<br><br> <a href="http://hank.org/hide.html">http://hank.org/hide.html</a><br><br><br><br>So, a page can have any number of the above blocks. The javascript<br>finds the blocks by looking for all "hidable" classes using Prototype's
<br>getElementsByClassName();<br><br>The onclick events are assigned to the spans with "click". When the<br>even first I look at the parentNode's class name to know if should<br>hide or to show.<br><br>Basically in pseudo code I set up the events like so:
<br><br> for div in get_by_class( 'hidable' ) {<br><br> // get <div> elements for the two inner sections<br> var content_div = get_class( 'content', div );<br> var hidden_div = get_class( 'hidden', div );
<br><br> // get the span for setting the events<br> var show_span = get_class( 'click', content_div );<br> var hide_span = get_class( 'click', hidden_div );<br><br> // closure to call the toggle passing in the two <div>s
<br> var click_event = function(e) {<br> toggle( e, content_div, hidden_div );<br> }<br><br> Event.observe( show_span, 'click', show_event, false );<br> Event.observe( hide_span, 'click', show_event, false );
<br> }<br><br><br>Then the event does:<br><br>function toggle ( event, content_div, hidden_div ) {<br><br> look at event element's parent's class name to determine if should<br> hide or show.<br><br>}<br>
<br><br><br>--<br>Bill Moseley<br><a href="mailto:moseley@hank.org">moseley@hank.org</a><br><br>_______________________________________________<br>Javascript mailing list<br><a href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu
</a><br><a href="https://lists.LaTech.edu/mailman/listinfo/javascript">https://lists.LaTech.edu/mailman/listinfo/javascript</a><br><br><br><br>_______________________________________________<br>Javascript mailing list<br>
<a href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br><a href="https://lists.LaTech.edu/mailman/listinfo/javascript">https://lists.LaTech.edu/mailman/listinfo/javascript</a><br><br><br></blockquote></div><br>