CSS toggler using Javascript

Question

I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:

$(document).ready(function () {
    $('tr').click(function () {
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('white-space', 'normal');
        }
        else {
            $(this).css('white-space', 'nowrap');
        }
    });
});

I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.

Answer 1

You just need to change the if condition so it depends on the value of white-space property:

$(document).ready(function () {
    $('tr').click(function () {
        var $this = $(this);
        if($this.css('white-space') === 'nowrap') {
            $this.css('white-space', 'normal');
        }
        else {
            $this.css('white-space', 'nowrap');
        }
    });
});