Не работает стиль

Question

Есть два стиля, второй добавляется через js при нажатии на кнопку. Стиль добавляется, но блок не отображается

    .text__phrase-result {
    display: none;
    max-width: 750px;
    flex-direction: column;
    margin: auto;
    margin-top: 50px;
    background-color: rgb(240, 235, 235);
}                                                                          

   .text__phrase-result_active {
    display: flex;
    }

Answer 1

Не должно быть трудностей

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>


  <div class="text__phrase-result">asd</div>

  <div id="id">qw</div>

  <script type="text/javascript">
    $('#id').click(function() {
      $('.text__phrase-result').toggleClass('text__phrase-result_active');
    });
  </script>
  <style type="text/css">
    .text__phrase-result {
      display: none;
      max-width: 750px;
      flex-direction: column;
      margin: auto;
      margin-top: 50px;
      background-color: rgb(240, 235, 235);
    }
    
    .text__phrase-result_active {
      display: flex;
    }
  </style>
</body>

</html>

БЛОГ НА HUSL

Не работает стиль

Ответы (1 шт):