这是一款基于Bootstrap的简洁手风琴特效UI设计效果。该手风琴特效在原生Bootstrap Accordion 组件的基础上，通过CSS代码来对其进行美化，制作出即简洁又美观的手风琴效果。

使用方法

在页面中引入bootstrap相关文件和jquery文件。

HTML结构

该手风琴特效的HTML结构为原生Bootstrap Accordion的HTML结构。

    

        

            

                

                    

                        

                            
                                Section 1
                            
                        
                    
                    

                        

                            ......
                        
                    
                
                ......
            
        
    
                 
                

CSS样式

CSS样式主要是对原来的Accordion组件进行美化，代码页十分简单，如下：

.panel-group .panel{
    border:0px none;
    border-radius: 0px;
    box-shadow: none;
    border-bottom: 1px solid #676767;
}
.panel-heading{
    padding: 0;
}
.panel-default > .panel-heading {
    color: #7a4b94;
}
.panel-title{
    position: relative;
}
.panel-title > a{
    display: block;
    padding: 11px 35px;
    background: #fff;
    font-weight: 600;
}
.panel-title > a:hover,
.panel-title > a:focus{
    text-decoration: none;
    outline: none;
}
.panel-title a:before{
    content: "\f068";
    font-family: 'FontAwesome';
    margin-right: 10px;
    color:#7a4b94;
    font-weight: normal;
    position: absolute;
    left:10px;
    top:11px;
}
.panel-title .collapsed:before{
    content: "\f067";
}
.panel-title a.collapsed{
    color:#7a4b94;
    font-weight: normal;
}
.panel-body{
    color:#727272;
    padding: 5px 10px 30px;
    line-height: 23px;
    letter-spacing: 1px;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
    border-top: 0px none;
}