| newbie22 |
02-09-2012 02:22 PM |
error in simple hide/show text in javascript
Code:
<html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>
<script type="text/javascript">
$(document).ready(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.one').toggle(function()
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow');
}, function()
{
return false;
});
$('div.two').toggle(function()
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow');
}, function()
{
return false;
});
$('div.three').toggle(function()
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow');
}, function()
{
return false;
});
});
</script>
</body>
</html>
The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!! :) |
