<ul>
  <li>
    <div class="title">我是標題一</div>
    <p>我是標題一的內容,我是標題一的內容,我是標題一的內容,我是標題一的內容。</p>
  </li>
  <li>
    <div class="title">我是標題二</div>
    <p>我是標題二的內容,我是標題二的內容,我是標題二的內容,我是標題三的內容。</p>
  </li>
  <li>
    <div class="title">我是標題三</div>
    <p>我是標題三的內容,我是標題三的內容,我是標題三的內容,我是標題三的內容。</p>
  </li>
  
</ul>
* { box-sizing: border-box; }
ul { margin: 0 auto; width:100%; max-width:400px;}
ul li { padding:0; list-style: none; border:1px solid black;}
.title { padding:0 5px; font:20px/2 "微軟正黑體";color:#fff; background:#000;cursor: pointer; }
.title:hover { color:#fff720;}
p { display:none; padding:0 5px; font:14px/1.5 "微軟正黑體";color:#000; }
$(".title").click(function(){
  var x =  $(this).siblings("p")
    if( x.css("display") == "none"  ){
      x.slideDown(); 
    }else{
      x.slideUp();
    };
});

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