CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Amit Kumar Sharma
Amit Kumar Sharma

Reputation: 262

Parent div become wider without animation when child element show/hide with Jquery UI animate function

I am having problem that when I try to show/Hide div element with jquery animation it open up smoothly, But its parent does not open up smoothly. Same happens on hiding.

Hence my whole page content take a jerk.

Demo: http://jsfiddle.net/neDZP/7/

HTML:

<div id="A_to_Z_top">     
    <div class="section clearfix">
        <div class="region region-a-to-z-top">
            <div class="block block-block contextual-links-region" id="block-block-48">
                <h2>INDEX A-Z</h2>
                <div class="content" style="display: block;">
                    <div id="atozSlide">
                        <ul>
                            <li><a href="#">A</a></li>
                            <li><a href="#">B</a></li>
                            <li><a href="#">C</a></li>
                            <li><a href="#">D</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">E</a></li>
                            <li><a href="#">F</a></li>
                            <li><a href="#">G</a></li>
                            <li><a href="#">H</a></li>
                            <li><a href="#">I</a></li>
                            <li><a href="#">J</a></li>
                            <li><a href="#">K</a></li>
                            <li><a href="#">L</a></li>
                            <li><a href="#">M</a></li>
                            <li><a href="#">O</a></li>
                            <li><a href="#">P</a></li>
                            <li><a href="#">Q</a></li>
                            <li><a href="#">R</a></li>
                            <li><a href="#">S</a></li>
                            <li><a href="#">T</a></li>
                            <li><a href="#">U</a></li>
                            <li><a href="#">V</a></li>
                            <li><a href="#">W</a></li>
                            <li><a href="#">X</a></li>
                            <li><a href="#">Y</a></li>
                            <li><a href="#">Z</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<P> This paragraph should be slide down smothly <p>

Javascript:

$(function() {
  // slide effect for showing and hiding A-Z header block    
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
      var effect = 'slide';
      var options = { direction: 'up' };
      var duration = 300;
      $("#block-block-48 > .content").stop().toggle(effect, options, duration);
  });
});

css:

#block-block-48 {
  background: none repeat scroll 0 0 #ff0000;
}

#block-block-48 h2 {
   background:  #035d8e;
   color: #ffffff;
   cursor: pointer;
   font-family: sans-serif;
   font-size: 16px;
   margin: 0;
   padding: 6px 15px 6px 0;
   text-align: right;
   text-decoration: none;
}

#block-block-48 .content {
    margin: 0;
    text-align: right;
}

#block-block-48 ul li {
    display: inline-block;
    float: left;
    list-style: none outside none;
    margin: 0 0 0 2px;
}

#block-block-48 ul li a {
    background: none repeat scroll 0 0 #035d8e;
    color: #ffffff;
    display: block;
    float: left;
    font-family: sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0 8px;
}

#block-block-48 ul {
    display: inline-block;
    margin: 5px 0 0;
    padding: 0;
}

Upvotes: 0

Views: 827

Answers (6)

Vala
Vala

Reputation: 35

Try this code :

<script>
$(function() {
  $('#block-block-48 > .content').hide();
  $('#block-block-48 h2').click(function(){ 
    var _header = $(this);
    var _content = _header.next();
    if(_content.is(':visible'))
    {
      _content.slideUp();
    }
    else
    {
      _content.slideDown();
     }
   });
 });
</script>

Upvotes: 0

Harsh
Harsh

Reputation: 1695

Use this in your function instead.

 $(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 

   $("#abovediv").toggle("slow");
    });

  });

Id "abovediv" is for following tag.

<h2>INDEX A-Z</h2>
<div id = "abovediv" class="content" style="display: block;">
<div id="atozSlide">

Upvotes: 0

user3171894
user3171894

Reputation:

use slideToggle http://jsfiddle.net/akash4pj/neDZP/14/

js

$(function() {
    // slide effect for showing and hiding A-Z header block    
    $('#block-block-48 > .content').hide();
    $('#block-block-48 h2').click(function(){ 
        var options = { direction: 'up' };
        var duration = 300;
        $("#block-block-48 > .content").stop().slideToggle( options, duration);
    });
  });

Upvotes: 1

Husen
Husen

Reputation: 935

The Easiest way to just change in your jQuery Function. Instead of wasting time on css.

Change this line to

 $("#block-block-48 > .content").stop().toggle(effect, options, duration);

this line 

$("#block-block-48 > .content").slideToggle();

JSFIDDLE

Upvotes: 1

Loren Posen
Loren Posen

Reputation: 235

First, take display:block out of div.content.

Then add the below to the CSS:

 #block-block-48 > .content {
     display:none;
 }

After that, change the JS to the following:

$(function() {
    // slide effect for showing and hiding A-Z header block  
     $('#block-block-48 h2').click(function(){ 
         $(this).next().slideToggle();
     });
});

That should fix it!

Let me know if that's the animation you wanted. If not, I can suggest other things.

Fiddle for reference

Upvotes: 3

wander
wander

Reputation: 957

Here's the working jsfiddle, modify the css as below:

#block-block-48 {
}
#block-block-48 .content {
    margin: 0;
    text-align: right;
    background: none repeat scroll 0 0 #ff0000;
}

Because you slide element is #block-block-48 .content, but the background color is set on #block-block-48

Upvotes: 0

Related Questions