Hello everybody,

I'm new to jQuery and just ran into this issue when trying to toggle a class to a div. The documentation says it should be: toggleClass( class, [duration] ) and that's how I wrote it but the duration argument is not being picked. Any ideas why?

Here's my code:

var $s = jQuery.noConflict();
        $s(document).ready(function() {
         // toggles the slickbox on clicking the noted link
          $s('a#portfolio-toggle').click(function() {
         $s('.portfolioclip').toggleClass('portfoliofull', 600);
         return false;       
                }, function () {


My website is http://www.invitro.vegasoftweb.com/es/ The toggle class is happening in the green plus icon on the left


3 answers

o.k.w 2355

I did a firebug console test on your site. I'm pretty sure the timing is in effect, try a value of say 5000 or 10000 and you can feel the 'delay'.

$s('a#portfolio-toggle').click(function() {
$s('.portfolioclip').toggleClass('portfoliofull', 5000);
return false;

The problem however is probably the way you implement the toggle. I'm not able to understand if the current behaviour (speed aside) is what you desired because it doesn't look logical to me.

The expanding behaviour hides all the items before displaying them fully. The collapsing worked well though.

Since what you want (I think) is just toogling (with effect) the height of the portfolio panel, you might want to consider using jQuery animate, there's example there to toggle height.

Answered over 8 years ago by o.k.w

o.k.w., thanks. You're right, the effect (aside speed) was not what I want. I think it was the "height:auto" property on the full container what was causing that weird hiding before showing when the class toggled.

I tried the jQuery animate but I can't get it to work properly. I mean, it toggles from the height of the clipping container to 0, instead of height:100%. So it goes from showing three items to not showing any, which is the opposite of what I want. It'd be nice to get it to work with animate cause IE doesn't work very well with toggleClass but I just can't seem to see what I'm doing wrong.

Here's the code I'm using:

$s('a#portfolio-morelink').click(function() {
     $s('.portfolioclip').animate({height:"toggle"}, 5000);
     return false;       
Answered over 8 years ago by John Sanabria

I think you're looking at the wrong docs. jQueryUI is another library written on top of jQuery, but is not the same thing. According to the jQuery docs, the second (optional) parameter to toggleClass is a boolean "switch". I'm not sure why jQueryUI would have a conflicting implementation of toggleClass, but it looks like you're only using the base jQuery library which does not have a duration parameter.

Also, I'm pretty sure you only need to call jQuery.noConflict() once, since that's enough to remove the "$" variable from the global namespace. You may also either want to stick with one alias for the jQuery variable, or I prefer to use the closure method to alias "jQuery" as "$" without it leaking into the global scope:

(function($) {
    $('some selector').doSomething();
Answered over 8 years ago by Matt Good