jQuery slideToggle not working on list tags

For some reason I cannot get my SlideToggle to work. My list 'tellusmore' is set to display:none right off the bat and when you click class 'tellustoday' I want the list to slideToggle (display).

开发者_StackOverflow

<div id="tellus">
    <h2>Have You Used This Product?</h2>
        <span class="tellustoday">Click Here to tell us about it!</span>
        <ul class="tellusmore">
           <li id="sendreview"><a href="">Write a quick review</a></li>
           <li id="sendpicture"><a href="">Send us pictures of your unit</a></li>
           <li id="sendvideo"><a href="">Send us a video of your product</a></li>
        </ul>
</div>

$(".tellustoday").click(function () {
 $('.tellusmore').slideToggle("fast");
});

#tellus {
-moz-border-radius: 4px 4px 4px 4px;
background-color: white;
border: 1px solid #E8E8E8;
line-height: normal;
padding: 15px 6px 15px 6px;
margin-bottom:10px;
}
#tellus h2{
color: #004B6C;
font-size: 20px;
text-transform: uppercase;
font-family: georgia,serif;
text-align: center;
font-weight: bold;
margin:5px 2px;
}
.tellustoday {
color: #004B6C;
text-decoration: underline;
text-transform: none;
font-weight: normal;
font-size: 14px;
cursor: pointer;
}
.tellusmore { display:none; }

---

It seems that you're generating the content with your HTML in your jQuery ready function, which is fine. The problem is that your javascript code to bind the event is in a separate <script> tag, which means it will get executed as soon as it's parsed, almost surely before your content gets inserted into the DOM on jQuery's ready event.

The solution would be to move the event binding to happen right after you insert your content inside your ready function, or to wrap it in its own ready function. Multiple ready functions are executed in the order they're parsed, so make sure your insertion is parsed before the event binding.

It's never a good idea to use jQuery functions before the DOM has loaded, even if you want to run some script immediately, wrap it in a ready function. This makes sure that the DOM and jQuery is fully loaded. Use $(function(){...} for simplicity.

---

It seems to work for me: http://jsfiddle.net/UUsBm/.

Have you added a reference to jQuery in your page?

Is there other javascript or css on your page that would conflict with this?

---

where exact you have bind your code ?

$(".tellustoday").click(function () {
 $('.tellusmore').slideToggle("fast");
});

Because on your live page, it's not throwing any error, or it doesn't do anything...

May be you need to put it inside document.ready()..

Can you test by putting some alert or console.log statement before calling slideToggle()?