お待たせいたしました！

コードをお渡しいたします！

よろしくお願いします！

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/BbDYfEGGYqOTeRtHwfiA/draft?token=f273babd62264000683819815f2b6705

JavaScript head

<script>
    var tocAccordion = tocAccordion || {};
    (function(_) {
        const target = '.js-tocAccordion';

        _.accordionOpen = function(el) {
            let toc = el.querySelector('.js-tocAccordionInner');
            let btn = el.querySelector('.js-btn');

            btn.addEventListener('click', function() {
                btn.classList.add('is-hidden');
                toc.classList.remove('is-hide');
            })
        };

        _.init = function() {
            Array.from(document.querySelectorAll(target), el => {
                _.accordionOpen(el);
            })
        };

    })(tocAccordion);
</script>

JavaScript body

<script>
    document.addEventListener('DOMContentLoaded', tocAccordion.init, false);
</script>

HTML

<div class="tocAccordion__area js-tocAccordion">

    <div class="tocAccordion__inner js-tocAccordionInner is-hide">
        <p class="tocHead">Contents <span class="allView__btn js-btn">全部見る ▼</span></p>
        <ul class="tocLists">
            <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li>
            <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li>
            <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li>
            <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li>
        </ul>
    </div>

</div>

CSS

p {
  margin: 0;
}

 ul {
  list-style: none;
  padding-left: 0;
}

 a {
  text-decoration: none;
}

 .tocAccordion__area {
  width: 100%;
  height: auto;
  background: #fff;
  font-size: 12px;
}

@media screen and (max-width: 600px) {
   .tocAccordion__area {
    font-size: 12px;
  }
}

 .tocAccordion__area .tocAccordion__inner {
  position: relative;
}

 .tocAccordion__area .tocAccordion__inner.is-hide {
  height: 130px;
  overflow-y: hidden;

}

 .tocAccordion__area .tocAccordion__inner.is-hide:after {
  content: '';
  width: 100%;
  height: 50px !important;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%);
}

 .tocAccordion__area .tocHead {
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
}

 .tocAccordion__area .tocLists .item {
  font-size: 1em;
  padding: 1em;
  border-bottom: 1px solid #ddd;
  position: relative;
}

 .tocAccordion__area .tocLists .item a:after {
  content: '↓';
  width: 1em;
  height: 1em;
  color: #fff;
  font-weight: bold;
  font-size: 0.7em;
  padding: 0.05em 0.2em 0.35em;
  background: #666;
  border-radius: 10vw;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

 .tocAccordion__area .tocLists .item a {
  color: #666;
}

 .tocAccordion__area .tocLists .item a:hover {
  text-decoration: underline;
}

 .tocAccordion__area .tocLists .subTocLists {
  padding-left: 1em;
}

 .is-hidden {
  /*display: none;*/
  visibility: hidden;
}

 .allView__btn {
  width: 100%;
  height: auto;
  border: 0;
  background: none;
  color: #666;
  font-size: 0.7em;
  font-weight: normal;
  cursor: pointer;
}