Установить стиль CSS на клик и удалить их на клик

Question

Я хочу установить стиль, когда нажимаю на div. Я сделал это, это работа. Но я хочу, чтобы при его нажатии и когда я нажимал, чтобы установить стиль по умолчанию.

     $('#tray-button').click(function() {
       $('.buttons-content').css('bottom', '160px');
    });

 <div class="buttons-content">
        <div id="tray-button" class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-grip-horizontal"></i>
        </div>
        <div class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-share-alt"></i>
        </div>
        <div class="button play-pause play">
            <div class="white"></div>
            <div class="black"></div>
            <i class="far fa-1-1x  fa-play-circle"></i>
        </div>
        <div class="button rotate">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-expand-alt"></i>
        </div>
    </div>

button-content - по умолчанию внизу: 40;

1. При нажатии на кнопку # лотка -> снизу: 160px;
2. При повторном нажатии кнопки # лотка -> снизу: 40px; (По умолчанию)

Answer 1

этот скрипт просто запоминает последнее состояние и делает все, что вы хотите.

$( document ).ready(function() {
var stack = 0
$("#tray-button").click(function()
{
if (stack === 0){
}
$('.buttons-content').css('bottom', '160px');
stack = 1;
}else{
$('.buttons-content').css('bottom', '40px');
stack = 0;
}

});

Answer 2

Определите определенное правило CSS, например,

.buttons-content.toggled {
   bottom: 160px;
}

с классом .toggled и включением click этого класса

$('#tray-button').click(function() {
   $('.buttons-content').toggleClass('toggled');
});

Когда класс удален, стиль элемента будет автоматически сброшен до предыдущего состояния. Кроме того, ваш сценарий более понятен, поскольку стиль не жестко закодирован.