when i click the link the the div is resized to 100px .. but again if i click i want to the the div to be same as before (800px) using the same sliding animation ..how can i do that

#ee{
	border:1px solid #00F;
	height:100px;
	width:800px;
	position: absolute; 
}
------------
<a href="#" class="mm">jajf</a>

<div id="ee">
</div>
--------------
<script type="text/javascript">

      $(".mm").click(function(){

		$("#ee").animate({
					 
			'width':'200px'	 
		})
      });
</script>

Recommended Answers

All 4 Replies

Try asking your question on a HTML or CSS or javascript forum.
Java is different.

Moving to Javascript.

try this ... hope this u wanted ...

<script type="text/javascript">
$(".mm").click(function(){ 
if ($("#ee").css('width') == '800px'){
    $("#ee").animate({
        'width':'200px'
    })
}
else{
    $("#ee").animate({
        'width':'800px'
    })
}
});
</script>

i have done it in two ways for you

first

<html>
<head>

</head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){

$("#testing").click(function(){
								 
if($("#testing").css('width') == ('800px'))
{
$("#testing").animate({'width':'100px'});
var resize = null;
}

else

if(resize == null)
{
 $("#testing").animate({'width':'800px'});	
}

});						   
});

</script>
<style type="text/css">
#testing{
border:1px solid #00F;
cursor: pointer;
height:100px;
width:800px;
position: absolute;
}
</style>

<body>

<div id="testing"></div>
</body>
</html>

In Second Method i have done styling within the JQ.

<html>
<head>

</head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#testing").css('border','1px solid #f00');
$("#testing").css('cursor','pointer');
$("#testing").css('height','100px');
$("#testing").css('width','800px');



$(this).click(function(){
								 
if($("#testing").css('width') == ('800px'))
{

$(this).css('border','1px solid #f00');
$(this).css('cursor','pointer');
$(this).css('height','100px');
$(this).css('height','100px');
$("#testing").animate({'width':'100px'});

var resize = null;
}
else
if(resize == null)
{
 $(this).css('border','1px solid #f00');
 $(this).css('cursor','pointer');
 $(this).css('height','100px');
 $("#testing").animate({'width':'800px'});	
}
});						   
						   
});


</script>


<body>

<div id="testing"></div>
</body>
</html>

Hope this works for you.
if you have query you can ask

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.