FAQ Accordian Bootstrap

FAQ_Accordian_Bootstrap.html

    <div class="faq">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Hva lurer jeg på her?</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis nulla viverra, fermentum mi vel, pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur ullamcorper nunc vitae ultricies. Vestibulum mattis, ante ac euismod tincidunt, metus erat tempus nisl, in tempus turpis magna eget leo. Morbi volutpat ligula non arcu iaculis fermentum. Mauris convallis viverra arcu, in sagittis enim consequat auctor. Mauris mollis dapibus mattis. Phasellus at neque quis erat porta placerat sed ut lacus. Praesent eros ante, mollis vitae risus in, placerat vulputate justo. Maecenas vel velit condimentum, facilisis dui ut, viverra ligula. Mauris blandit elementum risus non tristique. Quisque in malesuada lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras molestie, magna non vestibulum sagittis, nibh sem gravida magna, ut ullamcorper sapien velit a justo.
                            Vivamus volutpat pretium odio eget sodales. Sed blandit pretium massa ac pretium. Suspendisse sollicitudin ligula vel tortor sollicitudin, nec suscipit dolor ultrices. Sed dapibus vulputate augue, quis mattis dui interdum dignissim. Nam pulvinar lectus sollicitudin mi sollicitudin, a scelerisque tortor viverra. Morbi mi felis, dictum ut scelerisque nec, semper at sem. Proin ut dui a leo convallis feugiat. Ut tempor metus nulla, ac tincidunt augue vehicula a. Vestibulum nec luctus ipsum.
                        </a></p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Hva lurer jeg på her?</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis nulla viverra, fermentum mi vel, pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur ullamcorper nunc vitae ultricies. Vestibulum mattis, ante ac euismod tincidunt, metus erat tempus nisl, in tempus turpis magna eget leo. Morbi volutpat ligula non arcu iaculis fermentum. Mauris convallis viverra arcu, in sagittis enim consequat auctor. Mauris mollis dapibus mattis. Phasellus at neque quis erat porta placerat sed ut lacus. Praesent eros ante, mollis vitae risus in, placerat vulputate justo. Maecenas vel velit condimentum, facilisis dui ut, viverra ligula. Mauris blandit elementum risus non tristique. Quisque in malesuada lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras molestie, magna non vestibulum sagittis, nibh sem gravida magna, ut ullamcorper sapien velit a justo.
                          Vivamus volutpat pretium odio eget sodales. Sed blandit pretium massa ac pretium. Suspendisse sollicitudin ligula vel tortor sollicitudin, nec suscipit dolor ultrices. Sed dapibus vulputate augue, quis mattis dui interdum dignissim. Nam pulvinar lectus sollicitudin mi sollicitudin, a scelerisque tortor viverra. Morbi mi felis, dictum ut scelerisque nec, semper at sem. Proin ut dui a leo convallis feugiat. Ut tempor metus nulla, ac tincidunt augue vehicula a. Vestibulum nec luctus ipsum.
                      </a></p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Hva lurer jeg på her?</a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis nulla viverra, fermentum mi vel, pellentesque nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur ullamcorper nunc vitae ultricies. Vestibulum mattis, ante ac euismod tincidunt, metus erat tempus nisl, in tempus turpis magna eget leo. Morbi volutpat ligula non arcu iaculis fermentum. Mauris convallis viverra arcu, in sagittis enim consequat auctor. Mauris mollis dapibus mattis. Phasellus at neque quis erat porta placerat sed ut lacus. Praesent eros ante, mollis vitae risus in, placerat vulputate justo. Maecenas vel velit condimentum, facilisis dui ut, viverra ligula. Mauris blandit elementum risus non tristique. Quisque in malesuada lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras molestie, magna non vestibulum sagittis, nibh sem gravida magna, ut ullamcorper sapien velit a justo.
                          Vivamus volutpat pretium odio eget sodales. Sed blandit pretium massa ac pretium. Suspendisse sollicitudin ligula vel tortor sollicitudin, nec suscipit dolor ultrices. Sed dapibus vulputate augue, quis mattis dui interdum dignissim. Nam pulvinar lectus sollicitudin mi sollicitudin, a scelerisque tortor viverra. Morbi mi felis, dictum ut scelerisque nec, semper at sem. Proin ut dui a leo convallis feugiat. Ut tempor metus nulla, ac tincidunt augue vehicula a. Vestibulum nec luctus ipsum.
                      </a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

style.css

/*FAQ styling*/
.info-item .panel.panel-default {
    margin-bottom:0;
    border-bottom:1px solid #ddd;
}
.info-item .panel.panel-default .panel-heading {
    background-color:#fff;
    border-bottom:0 solid transparent;
    padding:0;
}

.info-item .panel.panel-default .panel-heading .panel-title{
    font-weight:600;
    text-transform:none;
}

.info-item .panel.panel-default .panel-heading .panel-title a {
    display:block;
    position:relative;
    padding:25px 45px 25px 15px;

}

.info-item .panel.panel-default .panel-heading .panel-title a:hover {
    background:rgba(0,0,0,0.015);
}

.info-item .panel.panel-default .panel-heading .panel-title a:hover, .info-item .panel.panel-default .panel-heading .panel-title a:active, .info-item .panel.panel-default .panel-heading .panel-title a:focus {
    color:#000;
}

 .panel-heading .panel-title a.collapsed:after {
     transform:rotate(0deg);
}

.panel-heading .panel-title a:after {
    position:absolute;
    right:25px;
    font-family:'FontAwesome';
    content:'\f067';
    transform:rotate(-45deg);
    transition:all 0.2s ease-out;

}
/*FAQ styling end*/