Javascript: Show/Hide multiple elements by name

Question

I need to show/hide multiple elements with the same name when another element is clicked, like <span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
would hide the elements with the corresponding value when clicked
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>

Also, onclick='' can't be used in the HTML, it has to go in the script. Can't apply any attributes to a tags other than href too (this is for a MediaWiki)

I've tried a bunch of different methods but I can't seem to get it to work, does anybody have any suggestions?

Answer 1

On page load, first add an event to all the elements with that name to toggle hide/show. When an element is clicked, loop through all the elements and change their style to display:none or display:block depending on the current state. To identify the current state you can either find the display attribute value or add/delete a class.

Answer 2

The markup's not valid: there's no such attribute as <span name> or <span value>, and you can't have multiple elements with the same id. All this is likely to confuse any attempts you make to fetch the elements by name or id. Use a class instead, and since what you've got is links to other parts of the page it would seem sensible to mark them up as internal links. You can always style them not to look like links using CSS.

<a class="showhide" href="#one">Click to hide one</a>
<a class="showhide" href="#two">Click to hide two</a>

<div id="one">One</div>
<div id="two">Two</div>

<script type="text/javascript">
    for (var i= document.links.length; i-->0;) {
        var link= document.links[i];
        if (link.className=='showhide') {
            var div= document.getElementById(link.hash.substring(1));
            Toggler(link, div, true);
        }
    }

    function Toggler(toggler, togglee, state) {
        toggler.onclick= function() {
            state= !state;
            togglee.style.display= state? 'block' : 'none';
            return false;
        }
    }
</script>