Kaip padaryti?

Sveiki, gal kas žinote kaip padaryti, kad šis kodas (HIDE/SHOW) veiktų ne viena funkcija, o keliomis, ta prasme kad tarkim paspaudus "rodyti/slėpti" atidarytų vieną rezultatą, o paspaudus ant "2 var." atidarytų kitą rezultatą, nes dabar tiesiog veikia tik pirmas, o antras ne, gal žinote kas nors kaip padaryti kad veiktų kiekvienas?

<script language="javascript">
   function showOrHide() 
   {
       var div = document.getElementById("showOrHideDiv");
       if (div.style.display == "block") 
       {
           div.style.display = "none";
       }
       else 
       {
           div.style.display = "block";
       }
   } 
</script>

<a href="javascript:showOrHide();">Rodyti/Slėpti</a>
<div id="showOrHideDiv" style="display: none"><h4>Labas, aš Tadas</h4></div>

<a href="javascript:showOrHide();">2 var.</a>
<div id="showOrHideDiv" style="display: none"><h4>toks ir toks</h4></div>

bandžiau daryti su jQuery tai irgi tas pats.

Aš naudodamas DLE TVS naudoju tokį spoiler kodą:

<a href="javascript:ShowOrHide('spoilerid1')">Spoileris</a>

<div id="spoilerid1" style="display: none;">
tekstas
</div>

Pas tave nurodyti vienodi ID

Geriau naudok jquery bus paprasciau padaryt stai ziurek:

I head mestelk:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#hide").click(function(){
   $("#divs").hide();
 });
 $("#show").click(function(){
   $("#divs").show();
 });
 $("#hide2").click(function(){
   $("#divs2").hide();
 });
 $("#show2").click(function(){
   $("#divs2").show();
 });
});
</script>

i norima vieta:

<div id="divs" style="display: none;"><h4>Labas, aš Tadas</h4></div>
<a id="show" href="#">Rodyti</a> / <a id="hide" href="#">Slepti</a>

<div id="divs2" style="display: none;"><h4>Labas, aš esu Krabas</h4></div>
<a id="show2" href="#">Rodyti</a> / <a id="hide2" href="#">Slepti</a>

Pagal ideja turetu veikti, bet galbut kas nors pasiulys geresni buda :)

Geriau naudok jquery bus paprasciau padaryt stai ziurek:

 

I head mestelk:

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#hide").click(function(){
   $("#divs").hide();
 });
 $("#show").click(function(){
   $("#divs").show();
 });
 $("#hide2").click(function(){
   $("#divs2").hide();
 });
 $("#show2").click(function(){
   $("#divs2").show();
 });
});
</script>

 

i norima vieta:

<div id="divs" style="display: none;"><h4>Labas, aš Tadas</h4></div>
<a id="show" href="#">Rodyti</a> / <a id="hide" href="#">Slepti</a>

<div id="divs2" style="display: none;"><h4>Labas, aš esu Krabas</h4></div>
<a id="show2" href="#">Rodyti</a> / <a id="hide2" href="#">Slepti</a>

 

Pagal ideja turetu veikti, bet galbut kas nors pasiulys geresni buda :)

Ačiū :)

Geriau naudok jquery bus paprasciau padaryt stai ziurek:

Kodel geriau?

paprasciau susigaudyt :), jei esi zalias. Zinoma, galima ir su javascript :)