مشکل با نمایش و مخفی کردن اطلاعات با کلیک

[kingblog]

سلام
کد زیر رو در نظر بگیرین:

کد:

<a onclick="graf(<?=$i?>);">ثبت</a>
<div id="m<?=$i?>" style="display:none;position:absolute;float:right;top:10px;"></div>
<script type="text/javascript">
function graf(id) {
document.getElementById("m"+id).style.display = "block";
}
</script>

اگه کدمون اینطوری باشه:
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="m4"></div>
...
میخوام وقتی روی هر کدوم کلیک شد ، بقیه مخفی بشن و فقط همون div نشون داده بشه
وقتی این تعداد محدود باشه مشکلی نیست:

کد:

document.getElementById("m1").style.display = "block";
document.getElementById("m2").style.display = "none";
document.getElementById("m3").style.display = "none";
document.getElementById("m4").style.display = "none";

ولی مسئله اینجاست که مقدار $i متغیر و زیاد هست. مثلا اگه 100 تا دیو داشته باشیم چی؟ کدنویسیش خیلی خیلی زیاد میشه
راهی هست بشه اینکار رو کرد؟

[kingblog]

این کد هم بدرستی جواب نمیده:

کد:

var e = document.getElementById("m"+id);
   if(e.style.display == 'block')
         e.style.display = 'none';
      else
         e.style.display = 'block';

[molana]

کد:

function graf(id) {
 var x = document.getElementById("m" + id);
 [].forEach.call(document.querySelectorAll('div'), function (el) {
 el.style.visibility = 'hidden';
});
 x.style.visibility = "initial";
}

[kingblog]

ممنون از شما
وقتی روی گزینه مورد نظر کلیک میکنم کل صفحه سفید میشه یعنی همه div ها مخفی میشن
بجای querySelectorAll('div') اومدم و querySelectorAll('x') قرار دادم ولی کار نکرد.

[molana]

خب این کد رو باید بر اساس خواسته‌ی خودتون تغییر بدید.

توی کد میاد اون المنتی که روش کلیک شده رو میگیره، همه رو هاید میکنه و اون رو نشون میده!
حالا ببین آی‌دی درست ست میشه یا نه!