Moving content inside of a div?

UPDATE:

The parent div (#container) must have a fixed height. I jsut want to shift the content in it so the active div is at the top and all overflow is hidden.

I am working on a webpage where a parent div has a fix size and will have several child divs in it. Each of these child divs will have an anchor tag that is always visible and it's own child div that will only be shown when it's sibling anchor tag is clicked.

I have this much working but I am running into the issue that when the sibling div is shown it sometimes goes out of the parent div and it's content is hidden. I would like to have the contents of this div repositioned to the top of the parent di开发者_StackOverflow中文版v so that it's content is never hidden. How would I accomplish this using jQuery?

You can see what I'm talking about by clicking Item2 in this Fiddle: http://jsfiddle.net/Broham/LA22t/1/

Html:

<div id="container">
    <div class="item">
        <a href="#">Item1</a>
        <div class="desc">A bunch of stuff about item 1!</div>
    </div>
    <div class="item">
        <a href="#">Item2</a>
        <div class="desc">
            A bunch of stuff about item 2!<br/>More stuff for item 2!<br/>last item 2 thing
        </div>
    </div>
    <div class="item">
        <a href="#">Item3</a>
        <div class="desc">
            A bunch of stuff about item 3!<br/>More stuff for item 3
        </div>
    </div>
</div>

css:

.desc
{
 display:none;   

}

#container
{
    height:75px;
    overflow:hidden;
    border-style:solid;
    border-width:1px;
}

jQuery:

$(".item a").click(function () {
    $(this).siblings(".desc").animate({ height: 'toggle' });
            });

What I have tried so far:

http://jsfiddle.net/Broham/LA22t/3/

But this only moves the active div, what I need to do is shift all of the content up and hide the overflow...

You have two options.

You can either hid all of the div above it (thus making it appear at the top), or you can float the div over the top of the other elements, which sounds more like what you want. However, floating it to the top is difficult, and requires different methods in different browsers, so the easiest way for you is just to set all the other items to display:none, and then display:block again when you click to close the one you are viewing.

Here, this does what you want:

$(".item a").click(function () {
    if(!this.opvar)this.opvar=false;
    $(this).siblings(".desc").animate({ height: 'toggle' });
    if(!this.opvar)$(this).parent().siblings(".item").css('display','none');
    else $(this).parent().siblings(".item").css('display','block');
    this.opvar = !this.opvar;
        });

Just a crude example though, there are better ways to do it.

Wrap everything inside the container div in another div (e.g. wrapper) and then animate the position (top) of this wrapper div to achieve desired result.

HTML

<div id="container">
  <div id="wrapper">
    <div class="item">
.........
</div>
</div>

CSS

#wrapper{
    height:100%;
    position:relative;
}

JS

$(".item a").click(function () {
    $(this).siblings(".desc").animate({ height: 'toggle' });
    $("#wrapper").animate({top:-1*$(this).position().top},"slow");
 });

Something like this might help you getting started: http://jsfiddle.net/sethi/zfdmC/2/

this should do the trick, but you probably want to close the inactive headers also

  $(".item a").click(function () {
       var a=  $(this).parent();
       $(this).parent().remove();
       $("#container > div.item").first().before(a);
       $('.removeMe').remove();
       $(this).siblings(".desc").animate({ height: 'toggle' });
  });

http://jsfiddle.net/LA22t/2/

Just removed height .

The trick is to actually move the elements in the DOM. Use .prependTo("#container"):

http://jsfiddle.net/LA22t/7/

$(".item a").click(function() {
    $(".desc").hide();
    $(this).parent().prependTo("#container").find(".desc").animate({height:"show"});
});