Compacting script

[ciupercomania]

I’m very dumb regarding javascript and for this reason i asking for your help.
I wanna use a script to show on click event a text area, but the problem is that i want 3 different text area on the same page. You can see it in action on my blog Ciupercomania. pressing the three dots (red, blue and green). The problem is that i repeated the same function 3 times, which is dumb; how can i simplify this function? Can you help me? Thank you.

<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('showthis');
    if(selectedobj.className=='hide'){  //check if classname is hide
    selectedobj.style.display = "block";
    selectedobj.readOnly=true;
    selectedobj.className ='show';
  }else{
    selectedobj.style.display = "none";
   selectedobj.className ='hide';
 }
}
function myfunc3() {
 var selectedobj=document.getElementById('showthis2');
  if(selectedobj.className=='hide'){  //check if classname is hide
    selectedobj.style.display = "block";
    selectedobj.readOnly=true;
    selectedobj.className ='show';
  }else{
    selectedobj.style.display = "none";
    selectedobj.className ='hide';
 }
}
function myfunc4() {
 var selectedobj=document.getElementById('showthis3');
  if(selectedobj.className=='hide'){  //check if classname is hide
    selectedobj.style.display = "block";
    selectedobj.readOnly=true;
    selectedobj.className ='show';
  }else{
    selectedobj.style.display = "none";
    selectedobj.className ='hide';
 }
}
    </script>

<label onclick="myfunc2()">button1</label>
<label onclick="myfunc4()">button2</label>
<label onclick="myfunc3()">button3</label>

<textarea class="hide" id="showthis" >lore ipsum 1...</textarea>
<textarea class="hide" id="showthis3" >lore ipsum 2...</textarea>
<textarea class="hide" id="showthis2" >lore ipsum 3 ...</textarea>

[megazoid]

Instead of using 3 functions you can use just one but pass argument to it
Argument will be used to generate ID of the target element

<label onclick="toggle(1)">button1</label>
<label onclick="toggle(2)">button2</label>
<label onclick="toggle(3)">button3</label>

<textarea class="hide" id="showthis1" >lore ipsum 1...</textarea>
<textarea class="hide" id="showthis2" >lore ipsum 2...</textarea>
<textarea class="hide" id="showthis3" >lore ipsum 3 ...</textarea>

<script>
    function toggle(index){
        // get textarea with id = showthis + index, eg. showthis1
        var selectedobj=document.getElementById('showthis' + index);
        if(selectedobj.className=='hide'){
            selectedobj.style.display = "block";
            selectedobj.readOnly=true;
            selectedobj.className ='show';
        } else {
            selectedobj.style.display = "none";
            selectedobj.className ='hide';
         }
    }
</script>

If you can use jQuery there is much shorter version of that code: http://jsfiddle.net/pv707Ldr/

[ciupercomania]

just great, thank you. I can use jQuery as well, thank you for that one too.

[felgall]

@megazoid

you can use just one but pass argument to it

You don’t even need an argument passed. You can easily test for which element triggered the event from inside the function itself. Then the code will work regardless of how many text areas there are.