Skip to content Skip to sidebar Skip to footer

Hide And Show Div In Same Level

I have my jsp page like this : EDIT : http://jsfiddle.net/F4nA9/
[...] [...]

Solution 1:

Your divs must be in same place/level in design;

Think that:

<style>#fonctiondetails{
        position: absolute;
        top:0;
        left:0;
    }
    #addqualite{
        position: absolute;
        top:0;
        left:0;
        display:none;
    } 
</style>

In that case, 2 divs are in same place and so while the firs div being disappear, second div will be shown. And they will be no movement effect because they are in the same place.

Example style was to show you the place of div. But you have to design your divs according to your template/page.

Try using position style (absolute, relative, static or fixed)

I think this will be helpfull

Solution 2:

You can see this http://jsfiddle.net/modaloda/F4nA9/1/

div {
    position: absolute;
    top: 0;
}

#fonctiondetails {
    z-index: 1;
}

Solution 3:

You can use setTimeout:

setTimeout(function(){
        $( "#addqualite" ).show('slide',1000);
    },200);

Solution 4:

I made my own solution, I create a container div like this:

<div id="animateslide">
    <div id="fonctiondetails"> ... </div>           
    <div id="addqualite" > ... </div>
</div>

and css file like this:

#animateslide {
   position: relative;
   [...]/* it's good to specify a height of your choice */
}

#fonctiondetails {
   position: absolute;
   z-index: 1;
   [...]
}

#addqualite{
   position: absolute; /* even if we did'nt specify position it's work */[...]
}

Post a Comment for "Hide And Show Div In Same Level"