<div class="wrap-menu">
  <div class="item-menu">
  <div class="title-menu">Menu 1</div>
    <div class="menu">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
      </div>
    </div>
  <div class="item-menu">
  <div class="title-menu">Menu 2</div>
    <div class="menu">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
      </div>
    </div>
 </div>
.wrap-menu {
  max-width: 400px;
  border: 1px solid #555;
}
.item-menu:not(:last-child) {
  border-bottom: 1px solid #555;
}
.title-menu {
  font-weight: 700;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  background: #333;
}
.menu {
  display: none;
  padding: 10px 0;
}
.menu a {
  display: block;
  padding: 5px 20px;
}
.item-menu.active .title-menu {
  border-bottom: 1px solid #555;
}
$('.title-menu').click(function(){
  $(this).parent().toggleClass('active');
  $(this).next().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