仅显示一个div.panel，而不同时显示两个

Question

我想在点击div.panel时显示div.accordion。但是，此代码显示了两个div.panel元素，而不仅显示了被单击的手风琴的孩子。

这是我的代码。我有一个使用Javascript将display: none切换到block的解决方案，但是用这种方法就没有动画。

$(document).ready(function() {
  $(".panel").hide()
});

$(".accordion").click(function() {
  if ($(".panel:visible").length != 0) {
    $(".panel").slideUp("normal");
  } else {
    $(".panel").slideDown("normal");
  }
  return false;
});

.accordion {
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.9s;
  margin: 0 auto;
}

.carles {
  background-image: url('/images/carles.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte {
  background-image: url('/images/charlotte.jpeg');
  background-repeat: no-repeat;
  width: 35vh;
  height: 35vh;
  margin: 0 auto;
  background-position: center;
  border-radius: 5px;
}

.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte {
  filter: grayscale(50%);
  -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}


/* Panel */

.panel {
  padding: 18px 18px;
  background-color: rgba(255, 255, 255, 1);
  color: #777;
  overflow: hidden;
  text-align: justify;
}

.nom {
  margin-top: 10%;
  text-align: center;
}

.coord {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10%;
}

.coord i {
  font-size: 2em;
}

.coord p,
.coord a {
  font-weight: bold;
  text-align: left;
  margin-left: 4em;
}

<div class="accordion col-6">
  <div class="carles"></div>
  <div class="nom">
    <h3>Name 1</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille & Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="accordion col-6">
  <div class="charlotte">
  </div>
  <div class="nom">
    <h3>Name 2</h3>
    <p>Employé polyvalent</p>
    <i class="fas fa-caret-down"></i>
  </div>
  <div class="panel">
    <ul>
      <li>Docteur en Géographie</li>
      <li>Université de Lille & Université de Valencia</li>
      <li>15 ans d'expériences dans l'éolien</li>
      <li>Plus de 100 MW éoliens développés</li>
      <li>Fondateur d'une société en 2004</li>
    </ul>
    <div class="coord">
      <table>
        <tr>
          <td><i class="fas fa-mobile-alt"></i></td>
          <td>
            <p>06 07 85 88 88</p>
          </td>
        </tr>
        <tr>
          <td><i class="far fa-envelope"></i></td>
          <td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>