Jquery slideToggle question

JavaScript
1

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/testFolder/indexpng.html

Any help much appreciated

2

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:

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

HTH

3

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

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.

5

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

The syntax is


$('#[I]id-of-the-div-you-click[/I]').click(function() {
  $('#[I]id-of-the-div-you-want-to-toggle[/I]').slideToggle('normal',function() {});
});

As for your question:


<li><a href="#" [COLOR="RoyalBlue"]id="profile"[/COLOR]>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 :slight_smile: