Bootstrap Accordion : Demo 37

HTML

SECTION 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia lacinia mauris, at ultricies leo ornare nec. Vivamus eu est vel felis dignissim tempor. Nulla facilisi. Duis molestie tortor ac tempor volutpat. Phasellus nec mi aliquet, sollicitudin neque eget, consectetur libero. Vestibulum sollicitudin sapien libero, egestas tempus eros scelerisque eu.

SECTION 2

SECTION 3

SECTION 4

CSS

                        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: "Font Awesome 5 Free";
                            font-weight: 900;
                            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);
                        }

JavaScript

(Accordion depend on jQuery and Bootstrap.)

accordion style : demo 37

HTML

CSS

JavaScript