Vertical accordion animation effect based on Bootstrap

Brief tutorials

This is a vertical accordion effect based on bootstrap. The vertical accordion effect is based on the native bootstrap accordion component, which is beautified by CSS3 to make it beautiful and elegant.

How to use

HTML structure

The basic HTML structure for this vertical accordion effect is as follows:

<div class= "Container" > <div class= "Row" > <div class= "col-md-offset-3 col-md-6" > <div class= "Panel-group" id= "accordion" role= "Tablist" aria-multiselectable= "true" > <div CLA                          ss= "Panel Panel-default" > <div class= "panel-heading" role= "tab" id= "Headingone" > 

CSS Styles

The style of the vertical accordion effect is as follows:

a:hover,a:focus{Text-decoration:none; Outline:none;}    #accordion. panel{Border:none;    Box-shadow:none;    border-radius:0; Margin-bottom: -5px;}    #accordion. panel-heading{padding:0;    border-radius:0;    Border:none; Text-align:center;}    #accordion. Panel-title a{Display:block;    padding:25px 30px;    font-size:16px;    Font-weight:bold;    Color: #fff;    Background: #333;    border-bottom:1px solid #4a4a4a;    position:relative; Transition:all 0.5s ease 0s;} #accordion. Panel-title a:hover{background: #4a4a4a;}    #accordion. Panel-title a:after, #accordion. Panel-title a.collapsed:after{content: "\f067";    Font-family:fontawesome;    font-size:15px;    font-weight:200;    Position:absolute;    top:25px;    left:15px;    Transform:rotate (135DEG); Transition:all 0.5s ease 0s;} #accordion. Panel-title a.collapsed:after{transform:rotate (0deg);}    #accordion. panel-body{background: #167ea0;    padding:0 0 0 40px; Border:nOne Position:relative;}    #accordion. Panel-body p{font-size:14px;    Color: #fff;    line-height:25px;    Background: #3296b7;    padding:30px; margin:0;}    #accordion. Panel-collapse. panel-body p{opacity:0;    Transform:scale (0.9); Transition:all 0.5s ease-in-out 0s;}    #accordion. panel-collapse.in. panel-body p{opacity:1; Transform:scale (1);}
The above is based on bootstrap vertical accordion animation effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

