CODEWITHSUNDEEP
jqueryhtmlcss
steo
steo

Reputation: 4656

restore unset div width

I am trying to animate a div , I'm setting it's width to 650px when I "minify" it, and I want to restore it's native width when I toggle my animation. My animated_div as you can see, has the width of the container , and only a min-width set. Here it is my code :

HTML

<div id="container> 
<div class="animated_div>
... 
<p>really a lot of text here</p>
...
</div>
</div>

CSS

.animated_div{
 padding:20px;
 min-width:650px;
 margin:0 auto;
 margin-bottom:15px;
 margin-top:10px;
 }

JQUERY

$("#toggle_click").on('click', function() {
  $("#animated_div").animate({
  width : "650px"
 })

$("#toggle_click2").on('click', function() {
  $("#animated_div").animate({
  width : "100%"   // Here it is the problem , It set the div to be over-widthed.
 })

The problem, as I wrote in the comment, is that if i set 100% the div get more width than the container.

Upvotes: 2

Views: 360

Answers (2)

BinaryTox1n
BinaryTox1n

Reputation: 3556

100% width + your 20px padding will make your div 40px wider than your container.

Try, instead of setting your width to 100%, set the width back to inherit:

$("#toggle_click2").on('click', function() {
    $("#animated_div").animate({
           width : "auto"
    });
});

Also, don't forget the closing brackets and semicolon.

Upvotes: 0

Josh Burgess
Josh Burgess

Reputation: 9567

You can simply set the width to "auto" via jQuery. Your call would look like this:

$("#toggle_click2").on('click', function(){
    $('#animated_div').animate({ width:'auto'});
});

Upvotes: 3

Related Questions