1
現在我想建立一個列表，組切換功能，其顯示如下： 
HTML和CSS有沒有更好的方式來做到這一點，而不是重複？
所以基本上我期待的是，當我點擊列表項的一個藍色箭頭，相應的項目將被切換並且細節將被展開，並且當我再次單擊藍色箭頭時，細節將會崩潰。
和細節中，我想有多個塊，就像下面：
然而，我的代碼現在的問題是這樣的：
<!DOCTYPE html>
<html>
<head>
<title>Details</title>
<style type="text/css">
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
width: 100%;
margin: 0 auto;
}
#trailBar {
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius: 0.25em;
}
p.trailTextTop {
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot {
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left {
float: left;
}
.right {
float: right;
}
p {
overflow: hidden;
}
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body {
background: #efefef;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>Collapse (as seen in documenatation)</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
\t \t \t </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span>
</p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span>
</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
\t \t \t </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
\t \t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
\t \t \t </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</body>
</html>在我代碼我以非常愚蠢的方式生成塊，這是複製和粘貼，並一次又一次。
我的問題是，如果有一種方法可以在html/css級別定義以下塊的類，以便隨時隨地調用它，就像java類一樣嗎？ 
在此先感謝！
你可以在這裏看看。這可能會幫助你https://jqueryui.com/accordion/#collapsible – Ionut
謝謝！有用的鏈接！雖然我沒有找到他們在哪裏定義一個可重用的類/ obj ...任何想法？謝謝！ –
你不需要一個班級來做到這一點。您可以使用普通和簡單的PHP，也可以使用CMS。即使您使用課程，除非您從數據庫獲取信息，否則您的內容將重複使用。 – Ionut