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.

It is not recommended to toggle inline styles, instead create a class and toggle it, and you only need this one line in your click event, e.g. $( this ).toggleClass( "whitespace-nowrap" ); — Asons
– Asons, Commented Dec 22, 2018 at 20:59
Thankyou, I was going to get round to that at some point so thanks for giving me the solution. — Laurie
– Laurie, Commented Dec 22, 2018 at 21:00

Vedran Maric · Accepted Answer · 2018-12-22 20:41:51Z

2

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');
        }
    });
});

answered Dec 22, 2018 at 20:41

Vedran Maric

89410 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Laurie Over a year ago

Thankyou, this works. Can I just verify how I think this is working: If the tr is clicked, and the white-space == nowrap, then change to normal, else if the white-space == normal, change to nowrap?

Laurie Over a year ago

Thankyou. Several more questions, what is 'this' referring to, the current object? And can you explain the var $this = $(this) line please.

Vedran Maric Over a year ago

this refers to current tr element that was clicked (regular dom object). $(this) wraps the tr element into jQuery object, so we can use handy functions like .css(..). var $this = $(this) we store the jQuery object into variable $this so we dont have to call jQuery constructor ($(this)) 3 times in the code below (so basically, its a bit cleaner, and more performant).

Laurie Over a year ago

Thanks for the explanation, I don't quite understand the second part but I'm sure that will come in time. Thanks again, I know this was probably very basic!

Jack Bashford · Accepted Answer · 2018-12-22 20:53:12Z

1

You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:

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

Hopefully this helps!

edited Dec 22, 2018 at 20:53

answered Dec 22, 2018 at 20:44

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Collectives™ on Stack Overflow

CSS toggler using Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related