Prototype - Show one element, hide siblings

I've got this html below. I need all div's inside div#ProductImagesContainer to be hidden at startup, all but div#productImageA.

When you click a.productImageB, the corresponding div#productImageB inside div#ProductImagesCont开发者_JAVA百科ainer should be shown and it's siblings should hide.

I need to use Prototype for this project, but I'm not a javascript genious. Would know what to do with jQuery but can't do it with Prototype.

<ul>
    <li>
        <a href="#" class="productImageA">A</a>
    </li>
    <li>
        <a href="#" class="productImageB">B</a>
    </li>
    <li>
        <a href="#" class="productImageC">C</a>
    </li>
    <li>
        <a href="#" class="productImageD">D</a>
    </li>
</ul>
<div id="ProductImagesContainer">
    <div id="productImageA">maybe flash video</div>
    <div id="productImageB">imageB</div>
    <div id="productImageC">imageC</div>
    <div id="productImageD">imageD</div>
</div>

My JavaScript is a bit rusty, but I believe you want the following:

Hide everything:

$$('#ProductImagesContainer div').invoke('hide');

Show the one you want:

$('ProductImageA').show();

Edit: documentation on prototype's api can be found here

Here is the jsfiddle to achieve what you are looking for in prototype:

Given HTML:

<ul>
    <li>
        <a href="#" class="productImageA">A</a>
    </li>
    <li>
        <a href="#" class="productImageB">B</a>
    </li>
    <li>
        <a href="#" class="productImageC">C</a>
    </li>
    <li>
        <a href="#" class="productImageD">D</a>
    </li>
</ul>
<div id="ProductImagesContainer">
    <div id="productImageA">maybe flash video</div>
    <div id="productImageB">imageB</div>
    <div id="productImageC">imageC</div>
    <div id="productImageD">imageD</div>
</div>

Prototype JavaScript:

//declare global variables to access within functions and etc...
var myLi = $$('li'); //get all the li a links
var myDiv = $('ProductImagesContainer').children; //get all the children of div#ProductImagesContainer
hideAllBut(null); //first hide all the divs

//function to hideAllBut the child div element of #ProductImagesContainer w/ the following classname as id
function hideAllBut(el) {
    var toShow = el;
    for (var index = 0; index < myDiv.length; index++) {
        if (myDiv[index].identify() == toShow) 
             myDiv[index].show();
        else 
             myDiv[index].hide();
    };
}

//oops through each li
myLi.each(function(myLiEl) {
    //attached on click event for each of the hyperlinks and use the hyperlink's class name to call hideAllBut(theclassname)
    Event.observe(myLiEl, 'click', function() {
        hideAllBut(myLiEl.firstDescendant().className); //gets the className of first decendant based on your example
    });
});

First we declare two global variables to hold all the li's a links and children of div#ProductImagesContainer. Then we create a function called hideAllBut(el); where it hides all but the child div element of #ProductImagesContainer w/ the classname as id. A parameter, which is the classname of link that is associated w/ the div element's id name that we need to hide. Then we proceed to oop through each li and add an onclick event so whenever the li is clicked it'll call hideAllBut(); and pass its classname as the param.

Based on kjy112's detailed answer, here is a shorter version.

HTML:

<ul id="ProductImagesLinks">
    <li>
        <a href="#" data-target="productImageA">A</a>
    </li>
    <li>
        <a href="#" data-target="productImageB">B</a>
    </li>
    <li>
        <a href="#" data-target="productImageC">C</a>
    </li>
    <li>
        <a href="#" data-target="productImageD">D</a>
    </li>
</ul>
<div id="ProductImagesContainer">
    <div id="productImageA">maybe flash video</div>
    <div id="productImageB">imageB</div>
    <div id="productImageC">imageC</div>
    <div id="productImageD">imageD</div>
</div>

Javascript:

$('ProductImagesLinks').on('click', 'a', function(event, element){
    var target = $(element.readAttribute('data-target'));
    if (target) {
        target.show();
        $$('#ProductImagesContainer > div[id!='+target.identify()+']').invoke('hide');
    }
});
$('ProductImagesContainer').down().siblings().invoke('hide');

The advantage here is it adapts if the list changes by utilising event bubbling.