نمایش و پنهان کردن یک قسمت

[Collection]

سلام دوستان

4 فرم دارم
ثبت نام؛ فراموشی رمز؛ فعال سازی؛ ورود

که با استفاده از لینک و استفاده از toggle_visibility اینارو درست کردم.
حالا مشکلی که دارم اگه روی 4 تا لینک کلیک کنی 4 تا قسمت نمایش داده میشه و روی هم می افته!
الان می خوام اگه روی یک لینک کلیک شد 3 قسمت دیگه پنهان بشه و فقط قسمت مورد نظر کلیک شده نمایش داده بشه.

ممنون می شم کمک کنید

لطفا کد باشه

[Collection]

سلام دوستان

4 فرم دارم
ثبت نام؛ فراموشی رمز؛ فعال سازی؛ ورود

که با استفاده از لینک و استفاده از toggle_visibility اینارو درست کردم.
حالا مشکلی که دارم اگه روی 4 تا لینک کلیک کنی 4 تا قسمت نمایش داده میشه و روی هم می افته!
الان می خوام اگه روی یک لینک کلیک شد 3 قسمت دیگه پنهان بشه و فقط قسمت مورد نظر کلیک شده نمایش داده بشه.

ممنون می شم کمک کنید

لطفا کد باشه


دوستان کمک لطف کنید !!!!!

[Moien Tajik]

کد این قسمت رو بزارید.

[Collection]

کد این قسمت رو بزارید.






<aside id="login">
<form name="login" action="#" method="post">
inputs here
</form>
</aside>


<aside id="register">
<form name="register" action="indexhtml.php" method="post">
Inputs here
</form>
</aside>


<aside id="activation">
<form name="activation" action="indexhtml.php" method="post">
inputs here

</form>
</aside>


<aside id="forgetfulness">
<form name="forgetfulness" action="indexhtml.php" method="post">
Input Here
</form>
</aside>





<aside id="links">
<a href="#" id="signin" onclick="toggle_visibility('login')">&nbsp;SIGN IN&nbsp;</a>
<a href="#" id="signup" onclick="toggle_visibility('register')">&nbsp;SIGN UP&nbsp;</a>
<a href="#" id="active" onclick="toggle_visibility('activation')">&nbsp;ACTIVE&nbsp;</a>
<a href="#" id="forgot" onclick="toggle_visibility('forgetfulness')">&nbsp;FORGOT&nbsp;</a>
</aside>



<!--- لینکها که با کلیک قسمت ها نمایش داده می شوند --->




function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

[Moien Tajik]

ببینین این کمکتون میکنه ( با جی کوئری نوشتم ) :

<aside id="login">
<form name="login" action="#" method="post">
First Text
</form>
</aside>



<aside id="register">
<form name="register" action="indexhtml.php" method="post">
Second Text
</form>
</aside>




<aside id="activation">
<form name="activation" action="indexhtml.php" method="post">
Third Text


</form>
</aside>




<aside id="forgetfulness">
<form name="forgetfulness" action="indexhtml.php" method="post">
Fourth Text
</form>
</aside>

<aside id="links">
<a href="#" id="signin">SIGN IN</a>
<a href="#" id="signup">SIGN UP</a>
<a href="#" id="active">ACTIVE</a>
<a href="#" id="forgot">FORGOT</a>
<a href="#" id="reset">RESET</a>
</aside>
<script type="text/javascript">
$("#signin").click(function(){
$("#register , #activation , #forgetfulness").hide();
});
$("#signup").click(function(){
$("#login , #activation , #forgetfulness").hide();
});
$("#active").click(function(){
$("#login , #register , #forgetfulness").hide();
});
$("#forgot").click(function(){
$("#login , #register , #activation").hide();
});
$("#reset").click(function(){
$("#login , #register , #activation,#forgetfulness").show();
});

</script>

[Collection]

ببینین این کمکتون میکنه ( با جی کوئری نوشتم ) :

<aside id="login">
<form name="login" action="#" method="post">
First Text
</form>
</aside>



<aside id="register">
<form name="register" action="indexhtml.php" method="post">
Second Text
</form>
</aside>




<aside id="activation">
<form name="activation" action="indexhtml.php" method="post">
Third Text


</form>
</aside>




<aside id="forgetfulness">
<form name="forgetfulness" action="indexhtml.php" method="post">
Fourth Text
</form>
</aside>

<aside id="links">
<a href="#" id="signin">SIGN IN</a>
<a href="#" id="signup">SIGN UP</a>
<a href="#" id="active">ACTIVE</a>
<a href="#" id="forgot">FORGOT</a>
<a href="#" id="reset">RESET</a>
</aside>
<script type="text/javascript">
$("#signin").click(function(){
$("#register , #activation , #forgetfulness").hide();
});
$("#signup").click(function(){
$("#login , #activation , #forgetfulness").hide();
});
$("#active").click(function(){
$("#login , #register , #forgetfulness").hide();
});
$("#forgot").click(function(){
$("#login , #register , #activation").hide();
});
$("#reset").click(function(){
$("#login , #register , #activation,#forgetfulness").show();
});

</script>





دوست عزیز کد جاوا اسکریپت بدون استفاده از جیکوئری اگه لطف کنید خیلی ممنون میشم!
اصلا در سایت از جیکوئری استفاده نکردم و نمی کنم