title: Set css style on click and remove them on click
body: <p>I want to set style when I click on div. I done this, It's work. But I want when its clicked and when I click to set the default style.</p>
  
  <pre><code>     $('#tray-button').click(function() {
         $('.buttons-content').css('bottom', '160px');
      });
  
   &lt;div class="buttons-content"&gt;
          &lt;div id="tray-button" class="button"&gt;
              &lt;div class="white"&gt;&lt;/div&gt;
              &lt;div class="black"&gt;&lt;/div&gt;
              &lt;i class="fas fa-grip-horizontal"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;div class="white"&gt;&lt;/div&gt;
              &lt;div class="black"&gt;&lt;/div&gt;
              &lt;i class="fas fa-share-alt"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="button play-pause play"&gt;
              &lt;div class="white"&gt;&lt;/div&gt;
              &lt;div class="black"&gt;&lt;/div&gt;
              &lt;i class="far fa-1-1x  fa-play-circle"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="button rotate"&gt;
              &lt;div class="white"&gt;&lt;/div&gt;
              &lt;div class="black"&gt;&lt;/div&gt;
              &lt;i class="fas fa-expand-alt"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>buttons-content - default bottom: 40;</p>
  
  <ol>
  <li>When click on #tray-button -> bottom: 160px;</li>
  <li>When click again on #tray-button -> bottom: 40px; (default)</li>
  </ol>