Html
    Css
    Js

    
                        
  .accordion-box {
	position:relative;
	padding:15px;
	background:#fff;
}
.accordion-box .list-item {
	position:relative;
	display:block;
	margin-bottom:-1px;
	background-color:#fff;
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
}
.accordion-box .list-item-title {
	padding:15px 0;
	position:relative;
}
.accordion-box .list-item-content {
	background-color:#fff;
	display:none;
	box-sizing:border-box;
	overflow:hidden;
}
.accordion-box .title-icon {
	position:absolute;
	top:15px;
	right:15px;
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	/* IE 9 */
      -moz-transform:rotate(0deg);
	/* Firefox */
      -webkit-transform:rotate(0deg);
	/* Safari 和 Chrome */
      -o-transform:rotate(0deg);
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.accordion-box .title-icon-active {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	/* IE 9 */
      -moz-transform:rotate(90deg);
	/* Firefox */
      -webkit-transform:rotate(90deg);
	/* Safari 和 Chrome */
      -o-transform:rotate(90deg);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

折叠面板Collapse

如何引入bootstrap.css会显示箭头,自己也可以在

<span class="title-icon  title-icon-active"><i class="glyphicon glyphicon-chevron-right"></i></span>

通过其他方式添加 

0