Как динамически изменить цвет фона с помощью Css

Question

Я установил метод, который при нажатии кнопки меняет цвет фона и сбрасывает цвет остальных трех кнопок. Метод для button1 выглядит следующим образом

<script>
    function changeBttn1() {
        document.getElementById("bttn1").style.backgroundColor = '#add8e6';
        document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
    }...

Также я хочу иметь возможность отображать Div, который применяется к каждой кнопке, а остальные скрыты одним нажатием кнопки. Div использует Class = Collapse, что соответствует Display: None в Bootstrap.css, но я хочу изменить его для запуска из того же метода, что и кнопки. Как я могу сделать оба события, используя Css?

Answer 1

Пожалуйста, сделайте это очень просто и легко

$('.my-btn').on('click',function(){
  var colorval=$(this).attr('color');
  $('.my-btn').css('background-color', 'grey');
  $(this).css('background-color', colorval);
});

button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
  <button class="my-btn" color="red">Red</button>
  <button class="my-btn" color="green">Green</button>
  <button class="my-btn" color="purple">Purple</button>
</div>