I am trying to recreate a solution similar to this:
<http://bit.ly/1kD64dR>

I need a DRY solution as I am going to be recreating this for 20+ elements:

I have tried creating an array of ids, and then calling a single function on each array but I just can't seem to wrap my head around the logic. I am restarting from the ground up...

What I want to accomplish is to show a series of images (for now i'm using text)... Each image will have a function applied to the onClick event, and then the new div that is shown will also have a click event applied to it.

[**FIDDLE**](http://jsfiddle.net/pZ7PY/5/)

The actual excerpt from the code to be used showing each `li` element's contents:

```
...
<li>
  <a href="#" onClick="show13()">
    <img src="../images/rtw3.jpg" alt="" /></a>
  <div id="img3">
    <a href="#" onClick="hide13()">
      <img src=".../images/block.png" alt="" />
    </a>
  </div>
</li>
...

```

Everything *Works* in the demo above...I just want to streamline and simplify the code.
Here is the WET example:

HTML

```
<ul>
<li><a href="#" onclick="show1()">Click me</a>
    <div id="d1" class="hide">
        <a href="#" onclick="hide1()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show2()">Click me</a>
    <div id="d2" class="hide">
        <a href="#" onclick="hide2()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show3()">Click me</a>
    <div id="d3" class="hide">
        <a href="#" onclick="hide3()">Shown!</a>
    </div>
</li>
<li><a href="#" onclick="show4()">Click me</a>
    <div id="d4" class="hide">
        <a href="#" onclick="hide4()">Shown!</a>
    </div>
</li>
</ul>

```

JS

```
function show1(){
document.getElementById("d1").className ='show';
}
function hide1(){
document.getElementById("d1").className ='hide';
}
function show2(){
document.getElementById("d2").className ='show';
}
function hide2(){
document.getElementById("d2").className ='hide';
}
function show3(){
document.getElementById("d3").className ='show';
}
function hide3(){
document.getElementById("d3").className ='hide';
}
function show4(){
document.getElementById("d4").className ='show';
}
function hide4(){
document.getElementById("d4").className ='hide';
}

```