Как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри?

[IsayR]

Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 1
      </h3>
      <div class="arrow-test"></div>
    </div>
    <div class="window-two">
      <div class="text">Текст 1</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 2
      </h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 2</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 3
      </h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 3</div>
    </div>
  </div>
</div>

.div{
  border: 1px solid #3A444E;
  border-radius: 10px;
  width: 300px;
  height: 64px;
  overflow: hidden;
}

.div.open {
  height: auto;
  background: #000;
  color: #fff;
}

.window-one {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  margin-bottom: 20px;
}

.arrow-test {
  content: '';
  background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.arrow-test.open {
  content: '';
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%;
  width: 30px;  
  height: 30px;
  cursor: pointer;
}

$('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});

 

[Igor Schnaider]

Так не плодите сущности. Стрелочка явно относится к самому блоку – пусть сам блок отвечает за свое состояние, а стрелка уже от него подтянет нужные стили.

.div.open { }
.div.open .arrow-test { }