There is a title to which the icon is bolted. When you click on it, the content of the block is minimized, and the button itself is turned by 90 degrees with the transformations.

How to make it so that when you press it again, when the content unfolds, it returns to its original position?

$(document).ready(function () { $('.fade-review-btn').click(function (e) { e.preventDefault(); $('.review-block-content').slideToggle(); }); }); 
 * { box-sizing: border-box; } body { font-family: 'Open Sans'; } .layout-center-wrapper { width: 500px; height: 300px; margin: 50px auto; padding: 1em; box-shadow: 0 0 10px rgba(0,0,0,.5); } .block-title { position: relative; border-bottom: 1px solid #191919; color: #191919; } .block-title h3 { display: inline; margin: 0 0 0 7px; padding: 0; font-size: 18px; color: #191919 } .fade-icon { position: absolute; top: 8px; right: 0; width: 15px; height: 10px; background: url('http://tripedali.com/wp-content/uploads/2016/02/app-page-icons.png') -28px 0 no-repeat; transform: rotate(0deg); transition: ease-out all 150ms; } .fade-icon:focus { outline: none; transform: rotate(-90deg); transition: ease-in all 150ms; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="layout-center-wrapper"> <div class="block-title"> <i class="fa fa-thumbs-o-up"></i> <h3>WhatsApp Review</h3> <a class="fade-icon fade-review-btn" href="#close"></a> </div> <div class="review-block-content"> <p> Today's smartphone is much the same as it used in the 2000s. The most significant difference between today's iOS and Android and former favorites Windows Mobile and Symbian is always being online. Old smartphones didn't have to be connected to the Internet all the time (as modern ones are). </p> </div> </div>

    3 answers 3

    replace: focus on class

      $(function() { $('.fade-review-btn').click(function(e) { e.preventDefault(); $(this).toggleClass('active') $('.review-block-content').slideToggle(); }); }); 
      * { -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Open Sans'; } .layout-center-wrapper { width: 500px; height: 300px; margin: 50px auto; padding: 1em; box-shadow: 0 0 10px rgba(0, 0, 0, .5); } .block-title { position: relative; border-bottom: 1px solid #191919; color: #191919; } .block-title h3 { display: inline; margin: 0 0 0 7px; padding: 0; font-size: 18px; color: #191919 } .fade-icon { position: absolute; top: 8px; right: 0; width: 15px; height: 10px; background: url('http://tripedali.com/wp-content/uploads/2016/02/app-page-icons.png') -28px 0 no-repeat; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: ease-out all 150ms; -moz-transition: ease-out all 150ms; -o-transition: ease-out all 150ms; transition: ease-out all 150ms; } .fade-icon.active { outline: none; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: ease-in all 150ms; -moz-transition: ease-in all 150ms; -o-transition: ease-in all 150ms; transition: ease-in all 150ms; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="layout-center-wrapper"> <div class="block-title"> <i class="fa fa-thumbs-o-up"></i> <h3>WhatsApp Review</h3> <a class="fade-icon fade-review-btn" href="#close"></a> </div> <div class="review-block-content"> <p> Today's smartphone is much the same as it used in the 2000s. The most significant difference between today's iOS and Android and former favorites Windows Mobile and Symbian is always being online. Old smartphones didn't have to be connected to the Internet all the time (as modern ones are). </p> </div>

      For example, you can add a class to a button, and rotate it in css:

       $(document).ready(function () { $('.fade-review-btn').click(function (e) { e.preventDefault(); $(this).toggleClass("closed"); $('.review-block-content').slideToggle(); }); }); 
       * { box-sizing: border-box; } body { font-family: 'Open Sans'; } .layout-center-wrapper { width: 500px; height: 300px; margin: 50px auto; padding: 1em; box-shadow: 0 0 10px rgba(0,0,0,.5); } .block-title { position: relative; border-bottom: 1px solid #191919; color: #191919; } .block-title h3 { display: inline; margin: 0 0 0 7px; padding: 0; font-size: 18px; color: #191919 } .fade-icon { position: absolute; top: 8px; right: 0; width: 15px; height: 10px; background: url('http://tripedali.com/wp-content/uploads/2016/02/app-page-icons.png') -28px 0 no-repeat; transform: rotate(0deg); transition: ease-out all 150ms; } .fade-review-btn.closed { transform: rotate(-90deg); } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="layout-center-wrapper"> <div class="block-title"> <i class="fa fa-thumbs-o-up"></i> <h3>WhatsApp Review</h3> <a class="fade-icon fade-review-btn" href="#close"></a> </div> <div class="review-block-content"> <p> Today's smartphone is much the same as it used in the 2000s. The most significant difference between today's iOS and Android and former favorites Windows Mobile and Symbian is always being online. Old smartphones didn't have to be connected to the Internet all the time (as modern ones are). </p> </div> </div> 

         $(document).ready(function () { $('.fade-review-btn').click(function (e) { ... $(this).data("TRANS", !$(this).data("TRANS")); if($(this).data("TRANS") { // крутите в одну строну } else { // крутите в другую } }); });