Question

I have this code:

HTML

<div class="box_meteo">
    <div class="box_meteo_pulsanti">
        <a href="javascript:void(0);"
           class="box_meteo_pulsante" id="meteoButton1">Link</a>
    </div>

    <div class="meteo_content">
       Text
    </div>        
</div>

CSS

.box_meteo
{
    width:600px;
    position:relative;
    height:200px;
}

.box_meteo_pulsanti
{
    position:absolute;
    bottom:0px;
    left:0px;
}

a.box_meteo_pulsante
{
    float:left;
    color:#ffffff;    
}

#meteoButton1
{
    width:150px;
    height:24px;
    position:relative;
    z-index:10;
    color:red;
}

.meteo_content
{
    position:absolute;
    bottom:0px;
    width:300px;
    height:180px;
    display:none;
    background-color:#2c2c2c;
    color:#ffffff;
}

jQuery

$('#meteoButton1').click(function() {
    if ($(".meteo_content").is(":hidden")) {
        $('.meteo_content').slideDown('slow', function() {
            return true;
        });
    } else {
        $('.meteo_content').slideUp('slow', function() {
            return true;
        });
    }
}); 

and I’d like, when I click on Link, to move also that link to the top, such as the link is “propped” on the div. So it must not be “fixed” to the bottom.
In less words : “moving the link to the top with the progression of the div’s height“

How can I do it? Hope the question is clear…

Answer 1

Here.

You need to put the link and the content in the same container, then fix that to the bottom. When you animate the height of the .content with .slideToggle(), it will push up the .toggler link.

HTML

<div class="toggleBox">
    <a href="#" class="toggler">Link</a>
    <div class="content">
       Text
    </div>    
</div>

jQuery

$('.toggleBox').each(function() {
    var box = $(this);
    box.find('a.toggler').click(function(e) {
        box.find(".content").slideToggle();

        return false;
        //or e.preventDefault(), depending on whether you want it to bubble
    });
});

CSS

.toggleBox
{
    position:absolute;
    bottom: 0px;
    left: 0px;
    width: 300px;
}

.toggleBox .toggler
{
    height: 24px;
    color: red;
    display: block;
}

.toggleBox .content
{
    height: 180px;
    display: none;
    background-color: #2c2c2c;
    color: #ffffff;
}