Как изменить цвет открытого блока faq?

Question

[Jooyless]

Есть код

<div class="faq">
                            <ul class="faq-questions">
                              <li class="li-question" id="li-qufaq1">
                                <div class="faq-question-title">
                                    <img src="./Img and icon/Ellipse 1.svg" alt="" class="faq-img">
                                    <h3 class="faq-question" id="faq-title 1">Брифинг и начало работы</h3>
                                </div>
                                <p class="faq-answer">Постановка задачи, обсуждение проекта с клиентов, расчет стоимости работы. После этого клиент вносит предоплату равную 30% от общей суммы проекта и предоставляет имеющиеся необходимые материалы для сайта</p>
                              </li>
                              <li class="li-question" id="li-qufaq2">
                                <h3 class="faq-question">Мудборд и дизайн-концепция </h3>
                                <p class="faq-answer">Разработка сайта</p>
                              </li>
                              <li class="li-question" id="li-qufaq3">
                                <h3 class="faq-question">Разработка прототипа и адаптивного дизайна</h3>
                                <p class="faq-answer">Разработка сайта</p>
                              </li>
                              <li class="li-question" id="li-qufaq4">
                                <h3 class="faq-question">Разработка сайта</h3>
                                <p class="faq-answer">Ответ</p>
                              </li>
                              <li class="li-question" id="li-qufaq5">
                                <h3 class="faq-question">Аналитика и тестирование</h3>
                                <p class="faq-answer">Ответ</p>
                              </li>
                              <li>
                                <a href="" class="faq-btn">Получить консультацию</a>
                              </li>
                            </ul>
                        </div>

.faq-question-title {
	display: flex;
    align-items: center;
	column-gap: 16px;
}
.article-SoW {
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
  .faq {
	width: 810px;
	position: relative;
  }
  
  .faq-answer {
	max-width: 540px;
  }
  .faq-questions > li {
	width: 100%;
	display: block;
	padding: 24px;
	background-color: #090909;
	border: 1px solid #f8f8f8;
	border-radius: 20px;
	margin-top: 32px;
  }

  .faq-questions > li h3.faq-question, .faq-questions > li .faq-question {
	font-size: 24px;
	font-weight: 500;
	color: #f8f8f8;
  }
  .faq-questions > li p.faq-answer, .faq-questions > li .faq-asnwer {
	font-size: 16px;
	line-height: 1.5;
	margin-top: 32px;
	display: none;
  }

$(function() {
    var $speed = 200;
    var $class = 'opened';
    var $class_open = '.faq-answer';
  
    $(document).ready(function() {
      $('.li-question').on('click', function() {
        $ul = $(this).closest('ul');
        $answer = $(this).closest('li').find($class_open);
  
        if (!$(this).closest('li').hasClass($class)) {
  
          $ul.find('li').each(function() {
            if ($(this).hasClass($class))
              $(this).removeClass($class).find($class_open).slideUp($speed);
          });
        }
  
        $answer
          .slideToggle($speed)
          .closest('li')
          .toggleClass($class);
      });
    });
  });

Хочу, чтобы при нажатии на какой-то из этапов, выбранный этап изменял цвет бекграунда, пропадал border и менялась иконка цифры. Пробовал через получение id, чтобы потом изменяло через если нажали на кнопку, то получить id, изменить цвет, а у предыдущего изменить на исходный цвет. Еще пробовал через css, :focus, но тоже ничего не происходило. По итогу не получилось, может как-то по-другому сделать, тогда вопрос, а как?

Comments

[Ankhena]

.li-question.opened {фон красный}