如何打开我的手风琴&单击时旋转字形图标，重新单击时反转

<ul class="accordion">
  <li>
    <div class="title">手风琴标题1</div>
    <div class="content">手风琴内容1</div>
  </li>
  <li>
    <div class="title">手风琴标题2</div>
    <div class="content">手风琴内容2</div>
  </li>
  <li>
    <div class="title">手风琴标题3</div>
    <div class="content">手风琴内容3</div>
  </li>
</ul>

.accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.title {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}

.content {
  display: none;
  padding: 10px;
}

.rotate {
  transform: rotate(180deg);
}

var titles = document.getElementsByClassName('title');

for (var i = 0; i < titles.length; i++) {
  titles[i].addEventListener('click', function() {
    this.classList.toggle('rotate');
    var content = this.nextElementSibling;
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
}