CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
Christian Burgos
Christian Burgos

Reputation: 1591

.slideUp() not working as intended

i have an icon that triggers both the effect of slide up and slide down but after sliding down it doesn't work anymore if i press the same icon again.

$(document).ready(function(){ 
    $('.subcat-row').hide();

    $("body").on("click",'.drop-subcat', function () {

        if($(this).children('i').attr('class','fa fa-toggle-down drop-down-icon')){
            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-up drop-down-icon');
        } else if( $(this).children('i').attr('class','fa fa-toggle-up drop-down-icon') ){
            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-down drop-down-icon');
        }
    });
});

here is the jsfiddle i made..

http://jsfiddle.net/vnbtfc92/

Upvotes: 0

Views: 122

Answers (2)

OJay
OJay

Reputation: 4921

The issue you are having is with this

.attr('class','fa fa-toggle-up drop-down-icon')

this sets the class attribute to 'fa fa-toggle-up drop-down-icon', so using in an if statement is not right (i.e. doesn't return boolean). I think you mean to test the class so use hasClass instead (which returns a boolean, true or false), something like

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {

        if($(this).children('i').hasClass('fa fa-toggle-down drop-down-icon')){

            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-up drop-down-icon');

        }else if($(this).children('i').hasClass('fa fa-toggle-up drop-down-icon')){

            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-down drop-down-icon');

        }

    });
});

If fact working with classes, as it appears you want to add a class to indicate it is down, and the same for up, just use the standard jQuery class functions i.e. addClass,hasClass,removeClass or toggleClass, much easier than using attr

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {   
        var childi =  $(this).children('i');
        if(childi.hasClass('fa-toggle-down')){    
            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);    
        }else if(childi.hasClass('fa-toggle-up')){    
            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);    
        }
       childi.toggleClass('fa-toggle-up fa-toggle-down');    
    });
});

or for variable caching, small code point of view, taking advantage of ternary operator and javascript method invocation via strings and square brackets, try the following

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {   
        var self = $(this),
            childi = self.children('i'),
            slideDirection = childi.hasClass('fa-toggle-down') ? "slideDown":"slideUp";
        self.closest('.category-row').siblings('.subcat-row')[slideDirection](500);
        childi.toggleClass('fa-toggle-up fa-toggle-down');    
    });
});

Upvotes: 2

Kijewski
Kijewski

Reputation: 26022

Don't do this: $(this).children('i').attr('class','fa fa-toggle-down drop-down-icon'), but save the state with $(this).data().

The easiest way to compare if some class is set for an element is $(this).is('.className').

But I'd use .data().

Upvotes: 1

Related Questions