How can I push to the top an element using slideUp?

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...

You want the link to be moved to the top, but also fixed to the bottom? I'm confused. — Matt Bradley, Aug 02 '11 at 15:00
here is a present for you: http://jsfiddle.net/XyHaD/4/ :) (use slideToggle) — meo, Aug 02 '11 at 15:03
I want the link moving to the top with the progression of the div's height :) — markzzz, Aug 02 '11 at 15:04

Eric · Accepted Answer · 2011-08-02T15:18:56.360

3

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;
}

edited Aug 02 '11 at 15:18

answered Aug 02 '11 at 15:05

Eric

95,302
53
242
374

if you change the return fasle to preventDefault() you got my +1 – meo Aug 02 '11 at 15:07
@meo: Why? What's the difference? – Eric Aug 02 '11 at 15:12
return false stops the the propagation. http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false if you do something else maybe on some parent, where you need to get the callback, you will have problems when i used return false; – meo Aug 02 '11 at 15:14
@meo: doesn't it depend on what the OP wants? I can't think of a situation where you'd want to bind an event to the parent and want it fired when the box is toggled. I've thrown in a comment mentioning that `.preventDefault` is an alternative. – Eric Aug 02 '11 at 15:16
you never know what you may want in the future. Its always good to build your stuff in a way its maintainable and easy to reuse. I can think of tons of situations where you want to do this... http://jsfiddle.net/XyHaD/5/ +you dont want your function to return false; why should it? Oh i clicked, everythin is fine but it returns false; did something go wrong? – meo Aug 02 '11 at 15:25
Uhm...teorically using javascript:void(0) prevent default doesnt have any influences?!?!? – markzzz Aug 02 '11 at 15:31
I mean : prevent default is influent with javascript:void(0); – markzzz Aug 02 '11 at 15:46
@markzzz: If you use `javascript:void(0);` instead of `#`, then you don't need to `e.preventDefault()`, since there is no default to prevent. You can still optionally `return false`. – Eric Aug 02 '11 at 15:54
@Eric : Yeah I know, its what I mean :) – markzzz Aug 03 '11 at 06:51

score 2 · Answer 2 · answered Aug 02 '11 at 15:06

2

Something like this: http://jsfiddle.net/XUncm/

answered Aug 02 '11 at 15:06

Matt Bradley

4,395
1
20
13

That is great. I have been wanting to know how to do this as such. Great example. – brenjt Aug 02 '11 at 15:08

How can I push to the top an element using slideUp?

HTML

CSS

jQuery

2 Answers2

HTML

jQuery

CSS