Javascript array to toggle link using document.addEventListener

Question

Link to JS Fiddle

HTML

 <a data-info-id="show1" onclick="toggleLink();" href="#">Click here for more info</a>
 <div id="show1" border="0">
 More information here
 </div>

CSS

    [id^="show"] { /* gets all elements where id starting with show */
    display: none;
 }  

JS

    function toggleLink()
{
     var elem=document.getElementById("show1");
    var hide = window.getComputedStyle(elem, null).display =="none";
     if (hide) {
         elem.style.display="block";
    } 
    else {
       elem.style.display="none";
    }
}

So what this does is show/hide the "show1" DIV when you click the link. I will be showing and hiding several DIV tags using this, they will be named id="show2", id="show3" ... etc. So how can I create an array with an event listener using the data-info-id tag similar to this array which works for checkboxes and radio buttons but not links.

    document.addEventListener('change', function(e) {
    var id = e.target.getAttribute('data-info-id');
    var checked = e.target.checked;
    if (id) {
    var div = document.getElementById(id);
    if (div) div.style.display = checked ? 'block' : 'none';
      }
    });

Answer 1

Try this out :

<style>
[id^="show"] { /* gets all elements where id starting with show */
    display: none;
}   
</style>
<script>
  function toggleLink(obj)
    {
        var idCount = obj.id;
        idCount = idCount.replace( new RegExp('c', 'g'), '');

        var elem = document.getElementById("show"+idCount);

        var hide = window.getComputedStyle(elem, null).display =="none";
         if (hide) {
             elem.style.display="block";
        } 
        else {
           elem.style.display="none";
        }
    }
</script>
<a id='c1' href="#" onclick="toggleLink(this)">Link1</a>
<a id='c2' href="#" onclick="toggleLink(this)">Link2</a> 
<a id='c3' href="#" onclick="toggleLink(this)">Link3</a>

<div id="show1" border="0">
More information here for Div1
</div>
<div id="show2" border="0">
More information here for Div2
</div>
<div id="show3" border="0">
More information here for Div3
</div>

Answer 2

With jQuery you eliminate all the JavaScript code that may not be cross browser compatible with one "neat" line:

jQuery("a[data-info-id='show1']").click(function(){jQuery("#show1").fadeIn(150);});

Although I would suggest you change your convention and use an id attribute on the anchor:

<a id="toggle-show1">toggle</a>

Because that way the first test is cleaner:

jQuery("#toggle-show1")...

(and also probably faster)

Finally, I do not thing that the "change" event is what you were looking for, but rather the click() as presented here.

P.S. You can also replace jQuery by a $ character.

All of this requires you to include jQuery, of course, something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

P.S. I leave as an exercise a way to write this code to toggle any number of <div> from any number of anchors without just copying/pasting the code for each one.