Give this a try and see if it shows what you need. You should be able to take this example and run with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <script type="text/javascript" src="js/prototype.js"></script> <title>Element.Observe Example</title> <script type="text/javascript"> //wait until the DOM is loaded document.observe('dom:loaded', function(){ //watch div with the ID of 'ta' and toggle all divs with a class of 'aXa' when clicked $('ta').observe('click', function (){ $$('.aXa').each(function (elem){ elem.toggle(); }) }); //watch div with the ID of 'ha' and hide all divs with a class of 'aXa' when clicked $('ha').observe('click', function (){ $$('.aXa').each(function (elem){ elem.hide(); }) }); //watch div with the ID of 'sa' and show all divs with a class of 'aXa' when clicked $('sa').observe('click', function (){ $$('.aXa').each(function (elem){ elem.show(); }) }); //watch div wiht the ID of 'a1' and toggle div with the ID of 'a1a' when clicked $('a1').observe('click', function (){ $('a1a').toggle(); }); //watch div wiht the ID of 'a2' and toggle div with the ID of 'a2a' when clicked $('a2').observe('click', function (){ $('a2a').toggle(); }); //watch div wiht the ID of 'a3' and toggle div with the ID of 'a3a' when clicked $('a3').observe('click', function (){ $('a3a').toggle(); }); //watch div wiht the ID of 'a4' and toggle div with the ID of 'a4a' when clicked $('a4').observe('click', function (){ $('a4a').toggle(); }); }) </script> <style type="text/css"> .aXa{ border: solid 3px blue; margin: 10px; padding: 10px; width: 200px; } .aX{ text-decoration: underline; color: blue; cursor: hand; width: 100px; } </style> </head> <body> <div class="aX" id="ta">Toggle All</div> <div class="aX" id="sa">Show All</div> <div class="aX" id="ha">Hide All</div> <div class="aX" id="a1">A1</div> <div class="aX" id="a2">A2</div> <div class="aX" id="a3">A3</div> <div class="aX" id="a4">A4</div> <div id="a1a" class="aXa" style="display: none;">Click A1 show/hide me.</div> <div id="a2a" class="aXa" style="display: none;">Click A2 show/hide me.</div> <div id="a3a" class="aXa" style="display: none;">Click A3 show/hide me.</div> <div id="a4a" class="aXa" style="display: none;">Click A4 show/hide me.</div> </body> </html>
-- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
