<ul class="list">
  <!--list-item 1つ目 -->
  <li class="list-item">
    <h3 class="list-tit">sample1</h3>
    <div class="list-content">
      <p class="list-txt">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam quia sunt accusantium repellat minus optio amet, eligendi aliquid dolore ex voluptatibus deserunt consequatur sint ducimus sequi obcaecati cum nemo quisquam?
      </p>
    </div>
  </li>
  <!-- list-item 2つ目 -->
  <li class="list-item">
    <h3 class="list-tit">sample2</h3>
    <div class="list-content">
      <p class="list-txt">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam quia sunt accusantium repellat minus optio amet, eligendi aliquid dolore ex voluptatibus deserunt consequatur sint ducimus sequi obcaecati cum nemo quisquam
      </p>
    </div>
  </li>
  <!-- list-item 3つ目 -->
  <li class="list-item">
    <h3 class="list-tit">sample3</h3>
    <div class="list-content">
      <p class="list-txt">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam quia sunt accusantium repellat minus optio amet, eligendi aliquid dolore ex voluptatibus deserunt consequatur sint ducimus sequi obcaecati cum nemo quisquam
      </p>
    </div>
  </li>
</ul>

ol, ul { list-style: none;}

/* 以下、アコーディオンの設定 */
.list {
  margin: 0 auto;
  max-width: 700px;
  width: 100%;
  padding:0;
  
}

.list .list-item .list-tit {
  padding: 0.5rem 0.5rem 0.5rem 1rem ;
  background-color: #D8D8D8;
  margin:0;
  border-radius: 5px;
}

.list .list-item .list-content {
  line-height: 1.5;
  height: 0rem;
  overflow: hidden;
  transition: height 0.5s ease 0s, padding 0.5s ease 0s;
  margin:0 0 10px 0;
  background-color:;
}

.list .list-item .list-content .list-txt {
  padding: 1rem;
}

const accordions = document.querySelectorAll('.list-item');

accordions.forEach(accordion => {
  accordion.addEventListener('click', () => {
    const content = accordion.querySelector('.list-content');

    content.classList.toggle('active');

    if(content.classList.contains('active')) {
      content.style.height = content.scrollHeight + 'px';
    } else {
      content.style.height = '0px';
    }

  });
});