CODEWITHSUNDEEP
javascriptjquery
Nistor Cristian
Nistor Cristian

Reputation: 1266

Why is removeClass not working properly?

I'm trying to make some effects to work but I can't. I have a list of divs and I want 4 buttons.

1) Load more

2) Show less

3) Change max

4) Change min

I made a JSFiddle. I don't know why on JSFiddle the removeClass and addClass don't work because on my computer they work. 

$(document).ready(function () {
    $('#changeMax').on('click', function(){
        $('li.col-md-3').addClass('fullwidth');
    });
    $('#changeMin').on('click', function(){
        $('li.col-md-3').removeClass('fullwidth');
    });
});

$(document).ready(function () {
    size_li = $(".row li").size();
    x=3;
    $('.row li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+4 : size_li;
        $('.row li:lt('+x+')').show("fast");
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 4 : x-4;
        $('.row li').not(':lt('+x+')').hide("fast");
    });
});

I will explain my problem from my computer. The first 3 buttons work with animation. The removeClass works but not with animation. I tried but it doesn't work.

Thanks

Upvotes: 0

Views: 68

Answers (3)

Tyr
Tyr

Reputation: 2810

This is showing that the fullwidth class is added:

$('#changeMax').on('click', function(){
        $('.row li.col-md-3').addClass('fullwidth');
        alert($('.row li.col-md-3')[0].className);
});

Upvotes: 0

epascarello
epascarello

Reputation: 207557

Because of specificity, other rules have a higher value

The rule .row li.col-md-3{ has a greater value than .fullwidth so the new width will not apply.

Change

.fullwidth{

to

.row li.fullwidth{

and it will start to work.

Upvotes: 1

Douglas.Sesar
Douglas.Sesar

Reputation: 4430

Just some css issues.

A quick fix is to use !important, but that is not always recommended.

.fullwidth{
    width: 100% !important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Upvotes: 0

Related Questions