.slideDown() content below jumps (isn't fluid)

Question

So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, and the 2nd down and causes some jumping with the button below.

$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');

});

$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');

});

$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');

});

This happens on what seems to be every animation of size.

Here's an example: http://kod.singaming.net/hosting

I've tried adding a width on #brz #slv and #gld, and I've tried adding a height to each.

Is it some css property I have to set? Let me know if I need to explain anything else.

Answer 1

The issue here is that the 3 divs #brz, #slv, and #gld are not wrapped in a div that will prevent the button below from moving because it is always the same height regardless of the movement of the content inside of it.

try:

<div style="[some height]">
     // your three content divs
    <div id="brz"></div> 
    <div id="slv"></div> 
    <div id="gld"></div> 
</div>

the [some height] should be equal to whatever height you need it to be so that it will not be affected by the changes of the content inside the div.

Answer 2

This new method uses one box called info into which the correct content is loaded using the .load() function.

alternative html:

<div id="info" class='pkg'></div> 
<div id="button" class="clearfix"> 

alternative script:

$('#1G').live('click', function(){
    if ($("#info").hasClass("1")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/bronze.html')
    }).slideToggle('slow').addClass("1");
});

$('#2G').live('click', function(){
    if ($("#info").hasClass("2")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/silver.html')
    }).slideToggle('slow').addClass("2");
});

$('#3G').live('click', function(){
    if ($("#info").hasClass("3")) return false;
    $('#info').removeClass("1 2 3").slideUp('slow', function() {
        $(this).load('_packages/gold.html')
    }).slideToggle('slow').addClass("3");
});

css for style.css:

#info {
display: none;
overflow: hidden;
height: 120px;
}

some other script that changes:

$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');

The above can all just go away.

EDIT

I added the code I mentioned in my comment to prevent the buttons from functioning if the click is on the currently selected item. It's probably not the most elegant solution but it works. I add the class 1, 2, or 3 depending on the item clicked, and remove all of them upon a click of a different one.