Question

I have a one <div> with links in it and another <div> below the first one.

I want the first one to disappear, so that:

• the second <div> does not move. So the jQuery function .hide() is not what I look for.
• the links become inactive in the first div.

Is it possible to do that, using javascript or jQuery ?

PS : if it is not possible, I am interested of the other option where :

• the first <div> hides.
• the second <div> moves gradually.

Thank you,

Colas

edit 2 :

You can look at this fidle http://jsfiddle.net/XKMEp/5/ to see what I tried to do.

edit : Here my attempts

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

even this does not work :

$("#div1").click(function() {       
    /*actus.fadeOut('slow');*/
    actus.fadeTo(1000,0).delay(1001).style.visibility = 'hidden';
    $('input,textarea,select,a', '#div1').attr("disabled", true);
});

And let’s say my html code is :

<div class="container">
    <div id="div1"></div>
</div>
    <div class="container">
<div id="div2"></div>
</div>


.container{width:300px;height:300px;}

Answer 1

Fixed… wasn’t giving up. Yes it needs to be the opacity (well fade to opacity for cross browser) to keep the position but one line of jquery does it. http://jsfiddle.net/calder12/XKMEp/24/

All you have to do is change the fermer to a tags instead of divs and restyle them a bit to get them where you had them.

    $(".fermer").click(function() {
    $(this).closest('div').fadeTo('slow',0);
    });
​

     <a href="#" class="fermer">
         fermer
     </a>