Возврат в исходное состояние кнопки
 

Здравствуйте. Я сделала, чтобы при нажатии на кнопку, менялась картинка и цвет кнопки. Но как сделать, чтобы при повторном нажатии на неё, цвет и картинка возвращались в исходное состояние?
Часть кода html:

<div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
                Парикмахерские услуги
                
                   </button>
            </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Стрижка с сушкой......1000 — 1500 руб.
                            <br>Стрижка с укладкой....1400 — 2200 руб.
                            <br>Коррекция челки.......200 руб.
                            <br>Окрашивание...........1600 — 5000 руб.
                            <br>Окрашивание корней....2000 — 2100 руб.
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
              <button class="btn-price" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Косметология
                   </button>
            </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <br>Чистка кожи......2200 — 2800 руб.
                            <br>Маски для лица....400 — 800 руб.
                            <br>Массаж лица.......500 — 1500 руб.

                        </div>
                    </div>
                </div>

Код js:

<script>
        $('#accordion button').click(function(event) {
            $('#accordion .button_fixed').removeClass('button_fixed');
            $(this).addClass('button_fixed');
            event.preventDefault()
        })

    </script>

solobutova@mail.ru,
toggleClass

Получилось, но при нажатии на любую кнопку меняется у всех кнопок и цвет фона, и картинка, как сделать, чтобы менялось всё именно при нажатии у одной кнопки?
Вот как я сделала, я в js ни капли не понимаю, поэтому прошу помочь

$(document).ready(function() {
            $("#accordion").click(function() {
                $("#accordion button").toggleClass("button_fixed");
            });
        });

solobutova@mail.ru,

$("#accordion").delegate( "button", "click", function() {
  $( this ).toggleClass("button_fixed");
});

Получилось, но...фон и картинка прежние возвращаются на место, когда нажимаешь на них, а если нажмешь на другую кнопку, то остаются измененными. как быть? Чтобы понятнее было, я предоставила скрин

solobutova@mail.ru,
Напишите пример в JS Bin. С живым примером всегда проще разбираться.

Alexander Belov,
https://jsbin.com/dokudowere/1/edit?html,css,js,output
не знаю, как здесь bootstrap добавлять. Первый раз с этим сталкиваюсь

solobutova@mail.ru,
У Вас много не нужных классов и логика не продумана до конца.

1. Если Вы объявляете класс collapsed, то логично полагать, что он применён к "свёрнутым" кнопкам.
А какой вид эти кнопки имеют по умолчанию при загрузке страницы? Свёрнутый. Значит, по умолчанию им должен быть присвоен класс collapsed.

2. Bootstrap новичкам не нужен, вредит только - моё мнение. Т.к. Вы, пользуясь им, не научитесь понимать многие аспекты вёрстки и CSS непосредственно. Перебирайте весь функционал вручную, тем более, на простых макетах, вроде Вашего.

3. Если я правильно понял задачу, стремились получить что-то в таком роде?

Нет, не то хотела получить. Спасибо, буду пробовать снова сама)

solobutova@mail.ru,
Давайте ещё раз. Вот у Вас есть меню.
Если оно активно (раскрыт блок с описанием услуг), значит "плюс" в кружке меняется на "минус". Если неактивно (по умолчанию), то там остаётся "плюс".

Если при каком-то активном меню мы кликаем на другую секцию, то предыдущие сворачиваются ("минус" у них меняется на исходный "плюс"). А у нового активного меню, соответственно, "плюс" меняется на "минус".

Как на рисунке. Верно?