Hi, There are several ways to do this, depending on the structure of your page. A thorough answer would take longer than I have (sadly), but I'll try to give you some pointers to help you find further reading, and an example.
Fundamentally, it breaks down into: 1. Knowing when the user has clicked an image. 2. Knowing which div(s) to show/hide for each image clicked (e.g., by class, location in the DOM, or ID). 3. Showing/hiding the div(s). Example with commented source (I'll also post these at the end of the message, but Pastie formats them nicely): HTML: http://pastie.org/779593 JS: http://pastie.org/779594 [You'll need to provide your own images (the names in the source are one.png, two.png, and three.png).] For #1 above, the example uses event delegation: We hook the `click` event on an element that is an ancestor of all of the images and handle the event at that point, rather than hooking each individual image. For just a few images, you could hook the image itself, but event delegation tends to be less memory-intensive. Search for "javascript event delegation" for details. For #2 above, the example uses an attribute on each img element called "data-showhide", which provides a CSS selector to match the elements (divs or anything else) that that image should show or hide. This lets your HTML designer handle setting this up and keeping it maintained without touching JavaScript code. That format (data-xyz) will be valid HTML as of HTML5. We retrieve the selector from the img element, then use `$$` to find matching elements, and use `Enumerable#invoke` to call the relevant function to show or hide them (below). For #3, we use the Prototype Element#show and Element#hide functions. For those to work, the elements must be hidden using inline style information (*not* a CSS selector in the stylesheet). If you want to use a CSS selector in the stylesheet to hide them initially instead, you'll want to define a class (e.g. "hidden") and put it on the elements, but then remove it when showing them. In the source I've called out the various Prototype functions being used; you can read more about them in the API docs[1][2]. [1] http://api.prototypejs.org (newer, but some content still missing) [2] http://prototypejs.org/api (older, look at the newer ones first) HTH, -- T.J. Crowder Independent Software Consultant tj / crowder software / com www.crowdersoftware.com ==== HTML (http://pastie.org/779593) ==== <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Show/Hide Example Page</title> <style type='text/css'> body { font-family: sans-serif; } </style> <script type='text/javascript' src='prototype.js'></script> <script type='text/javascript' src='showhide.js'></script> </head> <body> <p>Some text on the page</p> <!-- Our container for our images --> <div id='container'> <p>Some text inside our container</p> <p>One: <img src='one.png' data-showhide='#div1'> <br>Two: <img src='two.png' data-showhide='.alltwos'> <br>Three: <img src='three.png' data-showhide='#box div'></p> </div> <!-- The div that should be shown/hidden by image one --> <div id='div1' style='display: none'>This is div1</div> <!-- The divs that should be shown/hidden by image two --> <div class='alltwos' style='display: none'>This is one of the 'alltwos'</div> <div class='alltwos' style='display: none'>This is another of the 'alltwos'</div> <!-- The box that contains all of the divs that should be shown/hidden by image three --> <div id='box'>This is the 'box' div <div style='display: none'>This is something inside the 'box' div</ div> <div style='display: none'>This is something else inside the 'box' div</div> </div> </body> </html> ==== JavaScript (http://pastie.org/779594) ==== // Our page init function function pageInit() { // Hook the `click` event of the container of our images $('container').observe('click', imageClickHandler); } // Ask Prototype to call our init function as soon as the DOM is loaded; // this happens earlier than the window.onload event document.observe('dom:loaded', pageInit); // `imageClickHandler` is called on *every* click within our // 'container' element; hooked up in `pageInit`. function imageClickHandler(event) { var img, sel, list; // Find out if this click started on one of the images we're // interested in. Event#findElement searches, starting with the // element that was actually clicked, for a match for the given // CSS selector -- in our case, any img tag that has a data- showhide // attribute img = event.findElement('img[data-showhide]'); if (img) { // It's one of our images! We're handling the click, so stop // the event. event.stop(); // Get the selector for the div(s) to show/hide from our // custom attribute. [Note that we're using the HTML5 standard // form of custom attribute (data-xyz); it works *today* and // will be valid markup when HTML5 is finished.] sel = img.readAttribute('data-showhide'); // Allow for a blank selector; not sure why you'd want one, but... if (sel) { // Find the elements that this image is supposed to show/ hide // using Prototype's `$$` function. list = $$(sel); // Find any? if (list.length > 0) { // Yes, either show or hide them all depending on whether // the first one is visible, using Prototype's `Element#visible` // `Enumerable#invoke`, `element#hide`, and `Element#show`. list.invoke(list[0].visible() ? 'hide' : 'show'); } } } } On Jan 14, 3:14 pm, Iain <iainart...@gmail.com> wrote: > Hi, > > I'm currently trying to implement a simple show/hide effect using > prototype. I had a nice effect using mootools but the site is using > magento so mootools is a no-go as magento requires protoype. > > All I want is a click on an image to show a div, for several images / > divs on one page. All the divs are initially hidden by css. > > As I'm not a developer, I'm really struggling to understand how to do > this even though I can see its probably about the most basic function > in prototype. > > I'd really appreciate any help, as I'm banging my head off a wall at > the moment. > > cheers, > iain
-- 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.
