Thank you Friend.Another think i want to ask is when i click the link the table is displayed and other links were hidden if i want to click the next link i have to refresh the page instead i want to do is when i click the link the table should display and again when i click the link the table should not display
Hello Friend,
Try this:
<html>
<script>
function fun1(h) {
var tbl = document.getElementById('div1');
tbl.style.display = h;
document.getElementById('link2').style.visibility='hidden';
document.getElementById('link3').style.visibility='hidden';
}
function fun2(h) {
var tbl = document.getElementById('div2');
tbl.style.display = h;
document.getElementById('link1').style.visibility='hidden';
document.getElementById('link3').style.visibility='hidden';
}
function fun3(h) {
var tbl = document.getElementById('div3');
tbl.style.display = h;
document.getElementById('link1').style.visibility='hidden';
document.getElementById('link2').style.visibility='hidden';
}
function func(){
window.location.reload();
}
</script>
<p><br>
<a id="link1" href="javascript:fun1('block')" onDblClick="func()">Show1</a></p>
<div id=div1 name=div1 style="overflow:hidden;display:none">
<center><h2>Personal Details:</h2></center>
<form name="form" method="post" onsubmit="return validate();">
<center>
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Date Of Birth:</td><td><input type="text" name="dob"></td></tr>
</table>
</div>
<p><br>
<a id="link2" href="javascript:fun2('block')" onDblClick="func()" >Show2</a></p>
<div id=div2 name=div2 style="overflow:hidden;display:none">
<center><h2>Contact Details:</h2></center>
<center>
<table>
<tr><td>Address:</td><td><input type="text" name="address"></td></tr>
<tr><td>Contact No:</td><td><input type="text" name="contact"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
</table>
</center>
</div>
<p><br>
<a id="link3" href="javascript:fun3('block')" onDblClick="func()">Show3</a></p>
<div id=div3 name=div3 style="overflow:hidden;display:none">
<center><h2>Qualification:</h2></center>
<center>
<table>
<tr><td>Highest Qualification(With University):</td><td><input type="text" name="qua1"></td></tr>
<tr><td>Second Highest Qualification(With University:</td><td><input type="text" name="qua2"></td></tr>
</table>
</form>
</center>
</div>
</div>
</html>
Thanks
Hi Friend,
Try this:
<html>
<script>
function fun1(h) {
var tbl = document.getElementById('div1');
tbl.style.display = h;
document.getElementById('link2').style.visibility='hidden';
document.getElementById('link3').style.visibility='hidden';
}
function fun2(h) {
var tbl = document.getElementById('div2');
tbl.style.display = h;
document.getElementById('link1').style.visibility='hidden';
document.getElementById('link3').style.visibility='hidden';
}
function fun3(h) {
var tbl = document.getElementById('div3');
tbl.style.display = h;
document.getElementById('link1').style.visibility='hidden';
document.getElementById('link2').style.visibility='hidden';
}
function func(){
window.location.reload();
}
</script>
<br>
<a id="link1" href="javascript:fun1('block')" onDblClick="func()">Show1</a>
<div id=div1 name=div1 style="overflow:hidden;display:none">
<center><h2>Personal Details:</h2></center>
<form name="form" method="post" onsubmit="return validate();">
<center>
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Date Of Birth:</td><td><input type="text" name="dob"></td></tr>
</table>
</div>
<br>
<a id="link2" href="javascript:fun2('block')" onDblClick="func()" >Show2</a>
<div id=div2 name=div2 style="overflow:hidden;display:none">
<center><h2>Contact Details:</h2></center>
<center>
<table>
<tr><td>Address:</td><td><input type="text" name="address"></td></tr>
<tr><td>Contact No:</td><td><input type="text" name="contact"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
</table>
</center>
</div>
<br>
<a id="link3" href="javascript:fun3('block')" onDblClick="func()">Show3</a>
<div id=div3 name=div3 style="overflow:hidden;display:none">
<center><h2>Qualification:</h2></center>
<center>
<table>
<tr><td>Highest Qualification(With University):</td><td><input type="text" name="qua1"></td></tr>
<tr><td>Second Highest Qualification(With University:</td><td><input type="text" name="qua2"></td></tr>
</table>
</form>
</center>
</div>
</div>
</html>
Thanks