Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    339
    Thanks
    63
    Thanked 11 Times in 11 Posts

    Question replace div with slidedown() animation

    Hi, I've hit a brick wall with this as my JavaScript isn't too great.

    I want to have a link than when clicked replaces the div contents (of which the link is in) with something different, but revealed via a jQuery slideDown() animation. So essentially you click the link, it disappears and a div slides down and appears in it's place. It is for a 'show more options' feature.

    I've managed to make two scripts, one that has the slideDown() feature working, and one that replaces the content of the div once clicked, but I really can't work out how (or if) it is possible to combine them to achieve my aim? Or is there a better way to do this? Any help would be amazing!

    slidedown
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .showOptions {
            float:left;
            padding:8px;
            margin:16px;
            border:1px solid red;
            width:400px;
            height:200px;
            background-color:#eee;
            color:white;
        }
    </style>
    <div class="showOptions">
        <a href="javascript:;" onclick="changeContent" ;>show options</a>
    </div>
    <script type="text/javascript">
        $(".showoptions").click(function () {
            $(this).hide().slideDown('slow');
        });
    </script>
    <script type="text/javascript">
        var newContent = 'these are the options!';
    
        function changeContent(idstr) {
            document.getElementById('show-options').innerHTML = newContent;
        }
    </script>
    replace div
    Code:
    <script type="text/javascript">
        var newContent = 'these are the options!';
    
        function changeContent(idstr) {
            document.getElementById('show-options').innerHTML = newContent;
        }
    </script>
    <div id="show-options">
        <a href="javascript:;" onclick="changeContent();">show options</a>
    </div>
    Last edited by paddyfields; 01-29-2013 at 04:07 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Location
    London
    Posts
    339
    Thanks
    63
    Thanked 11 Times in 11 Posts
    I tried all day then worked it out soon after posting... but if anyone is interested;

    This replaces the content, then replaces the class, and animates the new content.

    Code:
    $("#show").click(function () {
        var newContent = 'these are the options!';
        document.getElementById('show-options').innerHTML = newContent;
        $("#show-options").removeClass("showOptions");
        $("#show-options").addClass("showOptions2");
        $("#show-options").hide().slideDown('slow');
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •