如何反转jQuery CSS样式？

Question

What is the best way to reverse css styling on the second on click?

What I'd like to happen is when the user clicks on the button again, it will just reverse everything to the original position. I'm not sure what's the most efficient way to do this without re-declaring everything in reverse. Especially that there's not just one class that changes status.

HTML:

<div class="wrapper-available">            
   <a class="available">Available</a>
   <div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>

CSS:

.wrapper-available {    
    display: inline-block;
    margin-top: 40px;
    position: relative;
}

.available {
    border-radius: 15px;
    padding: 5px 20px 5px 50px;
    background: #39b54a;    
    color: #FFF;
  display: inline-block;
    font-weight: bold;
}

.available-img {
    left: 0;
    position: absolute;
    top: -12px; 
    transition: all .20s ease-in;
}   

    .available-img img {
        border-radius: 30px;
        border: 2px solid #39b54a;
    }

jQuery:

 $(".available").click(function() {
    $(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");

    $(".available-img").css({
      "left": 100
    });

    $(".available-img img").css({
      "border" : "2px solid #CCC"
    });
  });

http://codepen.io/aguerrero/pen/ORKjya

Answer 1

The simplest way would be to toggle a class on the wrapper-available instead of adding inline styling and to also toggle the text() within the .available element. Try this:

 $(".available").click(function() { $(this).text(function(i, t) { return t == 'Available' ? 'Away' : 'Available'; }).closest('.wrapper-available').toggleClass('away'); }); 

 .wrapper-available { display: inline-block; margin-top: 40px; position: relative; } .available { border-radius: 15px; padding: 5px 20px 5px 50px; background: #39b54a; color: #FFF; display: inline-block; font-weight: bold; } .wrapper-available.away .available { background-color: #CCC; padding: 5px 50px 5px 20px; } .available-img { left: 0; position: absolute; top: -12px; transition: all .20s ease-in; } .wrapper-available.away .available-img { left: 70px; /* note 70px seems to work better than 100px here */ } .available-img img { border-radius: 30px; border: 2px solid #39b54a; } .wrapper-available.away .available-img img { border: 2px solid #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper-available"> <a class="available">Available</a> <div class="available-img"> <img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"> </div> </div> 

Answer 2

I added three classes in your CSS document with the styling that you added in your jQuery snippet. Now, instead of updating the specific styling for each element via jQuery you can just specify the new styling in your three selectors with the .active class.

CSS:

.available.active {
  background: #CCC;
  padding: 5px 50px 5px 20px;
}

.available-img.active {
  left: 100px;
}

.available-img.active img {
  border: 2px solid #CCC;
}

The jQuery snippet now toggles the .active class on your desired elements. These two:

<a class="available">Available</a>
<div class="available-img">

$(this).text() now toggles between Available and Away .

jQuery:

$('.available').click(function() {
  $(this).toggleClass('active').siblings().toggleClass('active');
  $(this).text(function(i, text) {
    return (text === 'Available') ? 'Away' : 'Available';
  });
});

Example: http://codepen.io/praktikdan/pen/wzVrGM