<div id="sample">開閉用のボタン</div>
<ul class="sp_navi">
  <li>TEXT</li>
  <li>TEXT</li>
  <li>TEXT</li>
  <li>TEXT</li>
</ul>
.sp_navi {
  display: none;
  list-style: none;
  margin: 0;
  padding: 10px 15px 15px;
  background-color: #ff6d77;
  color: #fff;
  list-style: none;
}

.sp_navi li {
  border-bottom: 1px solid #fff;
  padding: 12px 5px;
}

.sp_navi li:last-child {
  border-bottom: none;
}
$(document).ready(function(){
  $("#sample").on("click", function(){
    $(".sp_navi").slideToggle();
  });
});

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