CODEWITHSUNDEEP
javascriptjquery
Bye
Bye

Reputation: 778

JQuery: fadeToggle() works in a wrong way

I have two checkboxes with id

'check1' , 'check2'

two table columns with class

'column1', 'column2'

.

In js file 

$(document).ready(function() {
    $('.column1').hide();
    $('.column2').hide();


    $('#check1').change(function() {
        $('.column1').fadeToggle();
    });

    $('#check2').change(function() {
        $('.column2').fadeToggle();
    });
});

When check1 is checked column shows, then hides when unchecked. The problem is when check2 is checked column hides, and show when unchecked.

They are code in the same way but works in different way. What causes the problem, how to fix it? Thanks.

Upvotes: 1

Views: 71

Answers (1)

Fadhly Permata
Fadhly Permata

Reputation: 1686

Try this alternative:

$('#check2').click(function(){
    if($(this).is(':checked')) {
        $('.column2').fadeIn('slow');

    } else {
        $('.column2').fadeOut('slow');   
    }
});

Upvotes: 2

Related Questions