0

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>

Edited by Ezzaral: Added code tags. Please use them to format any code that you post.

5
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by extemer
0

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>
0

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

Edited by extemer: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.