Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Hide div by slide effect and show another div

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 638
    Comment on it

    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>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: