<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<div class="index_area">
  <input type="checkbox" id="label" class="check" />
  <label for="label"></label>
  <div class="index_list">
    <ul>
      <li><a href="#1">#1</a></li>
      <li><a href="#2">#2</a>
      <ul>
          <li><a href="#2-1">#2-1</a>
          <li><a href="#2-2">#2-2</a>
      </ul>
      </li>
      <li><a href="#3">#3</a></li>
    </ul>
  </div>
</div>
<h2 id="1">#1</h2>
<h2 id="2">#2</h2>
<h2 id="3">#3</h2>
</body>
body {
  background: #606e79;
}
.index_area {
  margin: 100px auto;
}
h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  height: 700px;
}

.index_area {
  padding: 20px;
  max-width: 700px;
  font-size: 15px;
  color: #6c6c6c;
}

/*チェックボックス非表示*/
.index_area input {
  display: none;
}

.index_area label {
  display: block;
  position: relative;
  padding :  25px 15px;
  font-weight: bold;
  background: #efefef;
  cursor :pointer;
}

.index_area label:before {
  content: "arrow_drop_down";
  font-family: 'Material Icons';
  font-size: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) ;
}

.index_area label::after {
  content: "目次";
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) ;
}

.index_area .index_list {
  height: auto;
  background: #efefef;
  padding-bottom: 2.5em;
}

.check:checked ~ .index_list {
  display: none;
}

.check:checked ~ label:before {
    content: 'arrow_right';
}

.index_list ul {
  padding: 0 1.5em;
  list-style: none;
  counter-reset: number 0;
}

.index_list li {
  line-height: 2.5;
  padding: 0 1em;
}

.index_list li a {
  display: block;
  color: #6c6c6c;
  text-decoration: none;
  border-bottom: solid 1px #d3d3d3;
}

.index_list li a::before {
  counter-increment: number 1;
  content: counter(number) '.';
  padding-right: 0.5em;
}

.index_list li a:hover {
  opacity: 0.5;
}

.index_list li ul li {
  padding: 0;
}
$(function(){
  $('a[href^="#"]').click(function(){
   var speed = 400; 
   var href= $(this).attr("href");
   var target = $(href == "#" || href == "" ? 'html' : href);
   var position = target.offset().top;
   $("html, body").animate({scrollTop:position}, speed, "swing");
   return false;
  });
 });

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js