CODEWITHSUNDEEP
jquerytoggle
Danny Cooper
Danny Cooper

Reputation: 355

fadeToggle Issue With jQuery

I'm trying to do a simple fadeToggle() with jQuery and for some reason the code isn't firing. I want clicking the link in the first <li> to make the other four list items appear.

Here's the HTML:

 <ul>
        <li><a id="filters-switch" href="javascript:void(0)">filters</a></li>
        <li class="filters"><a href="http://cargocollective.com/dzangtech/filter/event/">events</a></li>
        <li class="filters"><a href="http://cargocollective.com/dzangtech/filter/release/">releases</a></li>
        <li class="filters"><a href="http://cargocollective.com/dzangtech/filter/misc/">misc.</a></li>
        <li class="filters"><a href="http://cargocollective.com/dzangtech">all</a></li>
 </ul>

Here's the JavaScript:

<script type="text/javascript">
  $("#filters-switch").click(function() {
  $(".filters").fadeToggle("slow", "linear");
});
</script>

Also this is the website if it helps to look at that: http://cargocollective.com/dzangtech. The links are in the top-left.

Upvotes: 0

Views: 260

Answers (3)

PJ McCormick
PJ McCormick

Reputation: 1993

.fadeToggle() was added in jQuery 1.4.4--looks like your site is using jQuery 1.4.2. Try upgrading jQuery, otherwise you'll just need to just regular ol' fadeIn / fadeOut.

Upvotes: 2

moonwave99
moonwave99

Reputation: 22820

You are using jQuery v1.4.2, apparently it doesn't feature fadeToggle - update to latest.

EDIT: yes, fadeToggle comes in 1.4.4.

Upvotes: 3

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

bind the event on document ready

$(document).ready(function(){
  $("#filters-switch").click(function() {
    $(".filters").fadeToggle("slow", "linear");
   });
});

Upvotes: 0

Related Questions