<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();
});
This Pen doesn't use any external CSS resources.