SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery slideToggle question

    Hi All,

    I have just started using jquery, in particular the slideToggle animation but have no idea why it is not working.

    This is the script I have used
    $('#about').click(function() {
    $('#profile').slideToggle('normal',function() {
    });
    });

    CSS
    #container {margin:0 auto; width:960px; height:670px;}

    #about { /*about, portfolio, contact section*/
    margin:0 auto;
    width:960px;
    height:400px;
    padding-top:70px;
    margin-top:15px;
    background:#f1f1f3;
    display:none;}

    This is the link to the view source code http://photorestorationexpert.co.uk/.../indexpng.html

    Any help much appreciated

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    The code is run before the body is loaded, so #about doesn't yet exist.

    There are two solutions:
    1) Move the <script ... /> line just before </body>

    2) Change the script like this:

    Code JavaScript:
    $(document).ready( function() {
      $('#about').click(function() {
        $('#profile').slideToggle('normal',function() {});
      });
    });

    HTH
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    I have altered the script and also tried moving the 2 <script> tags before </body>, tested the page on my localhost but it still is not doing anything, like the homepage toggling down

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Looking at the source of the page I think you've confused the ID's.

    Your current code says: When a user clicks the element with ID "about", show (or hide) the div with "id" portfolio.

    However, the link that needs to be clicked has ID "portfolio" and the div that is initially hidden has ID "about", so you need to swap the two either in the HTML or in the jQuery (but not in both places)

    Note that this is in addition to my previous post, not a replacement.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scallioXTX,

    been meaning to reply to your answer.
    had a look at the source and there is no "id" portfolio but there is an "id" profile, had a look at the html for the nav, would the following be correct in order for the slideToggle to work
    <li><a href="#" id="profile">About</a></li>
    <li><a href="#" id="work">Portfolio</a></li>
    <li><a href="#" id="communicate">Contact</a></li>

    do I need the id="profile" as per above or can I use #about in my css document for the slideToggle to work

    thanks again

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    The syntax is

    Code:
    $('#id-of-the-div-you-click').click(function() {
      $('#id-of-the-div-you-want-to-toggle').slideToggle('normal',function() {});
    });
    As for your question:

    Code:
    <li><a href="#" id="profile">About</a></li>
    "profile" is the id. About is just the content of the div and has nothing to do with the id of the element whatsoever
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Bookmarks

Posting Permissions

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