Question

I know this code is messy:

$("#tog-desc").click(function(e) {
    $(this).toggleClass("open");
    $(".description").slideToggle();

    if( $(this).hasClass("open") ) {
        $(this).html("Hide Description").css("background-position", "85px 3px");
    }
    else {
        $(this).html("Show Description").css("background-position", "88px -10px");
    }

    e.preventDefault();
});

But I’m not sure how this could be tidied up with the ternary operator to make it neat and concise. I always seem to end up writing overly long if/else statements with Javascript and I’d like to understand how not to have to do so!

Edit: by default #tog-desc shows “Show Description” and .description is hidden, in case this wasn’t obvious

Thanks.

Answer 1

$("#tog-desc").click(function(e) {
    var $this = $(this), has_cls = $this.hasClass("open");
    $this.toggleClass("open")
       .text((has_cls ? "Hide" : "Show") + " Description")
       .css("background-position", has_cls ? "85px 3px" : "88px -10px");

    $(".description").slideToggle()

    e.preventDefault();
});

---

Or make the background-position part of the .open css class…

$("#tog-desc").click(function(e) {
    var $this = $(this);
    $this.toggleClass("open")
       .text(($this.hasClass("open") ? "Hide" : "Show") + " Description");

    $(".description").slideToggle();

    e.preventDefault();
});