<input type="checkbox" id="toggle">
<label for="toggle" id="button">
  メニュータイトル
</label>
<div id="content">
  メニューコンテンツ
</div>
#toggle{
  display:none;
}
#button{
  background-color:cyan;
  display:block;
  cursor:pointer;
}
#button::after{
  content:"▼";
}
#content{
  display:none;
}

/*メニューを開いたとき（＝チェックボックスがチェックされているとき）*/
#toggle:checked ~ #button::after{
  content:"▲"
}
#toggle:checked ~ #content{
  display:block
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.