This code is used to hide div by slding effect towards right to left and show another div by the same sliding effect on its place .

<script src="js/jquery.min.js" language="javascript" type='text/javascript'></script>
<script src="js/jquery-ui.js" language="javascript" type='text/javascript'></script>
<script>
$(document).ready(function () {
    var maxHeight = 0;
    $('.slidingDiv').each(function() {
        if($(this).height() > maxHeight) maxHeight = $(this).height();
    });
    $('#wrapper').height(maxHeight);

    $('#click1').click(function () {
        $('#box1').hide("slide", {
            direction: "left"
        }, 1000);
        $('#box2').show("slide", {
            direction: "right"
        }, 1000);
    });
    $('#click2').click(function () {
        $('#box2').hide("slide", {
            direction: "right"
        }, 1000);
        $('#box1').show("slide", {
            direction: "left"
        }, 1000);
    });
});
</script>
<style>
#wrapper {
    position:relative;
}
#wrapper div {
    position:absolute;
    top:0;
}
</style>
<h1>TiTle</h1>

<div id="wrapper">
    <div id="box1" class="slidingDiv"> <a href="#" id="click1">Click to show other div</a>

        <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.</div>

   <div id="box2" class="slidingDiv" style="display:none"> <a href="#" id="click2">Click to show other div</a>

        <br/>Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.<br>More Line!</div>
</div>