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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    126
    Thanks
    4
    Thanked 0 Times in 0 Posts

    jQuery SlideDown

    I am new to jQuery but am using it to SlideDown a DIV element when the
    a:link is clicked.

    However, no matter what link i click on the page, it slides down the
    div, it's as if the script has taken over every link on the page.

    Here is the code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
    var $div = $('#alias-box');
    var height = $div.height();
    $div.hide().css({ height : 0 });

    $('a').click(function () {
    if ($div.is(':visible')) {
    $div.animate({ height: 0 }, { duration: 250, complete:
    function () {
    $div.hide();
    } });
    } else {
    $div.show().animate({ height : height }, { duration:
    250 });
    }

    return false;
    });
    });
    </script>


    html:

    <a href="#alias-box" style="font-size:10px;">Custom Alias</a>
    <div id="alias-box"><input name="new_alias" class="field_50"
    type="text" /></div>


    so clicking Custom Alias, drops the 'alias-box' div.

    But even when i click other links such as:

    <a href="contact.php">Contact</a>

    it ignores going to contact.php and displays the div.

    Any ideas how to fix this?

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

    $("#alias-box").click(function () {
    $("#alias-div").slideToggle("slow");
    });

    });
    </script>

    html:

    <a id="alias-box" href="#" style="font-size:10px;">Custom Alias</a>
    <div id="alias-div" style="display:none;"><input name="new_alias" class="field_50"
    type="text" /></div>
    Last edited by seco; 01-18-2010 at 11:19 AM.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    126
    Thanks
    4
    Thanked 0 Times in 0 Posts
    works a treat and so much simpler.

    thanks


  •  

    Posting Permissions

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