Accordion 02

Style 2

Mauris congue euismod purus at semper. Morbi et vulputate massa?

Donec mattis finibus elit ut tristique. Nullam tempus nunc eget arcu vulputate, eu porttitor tellus commodo. Aliquam erat volutpat. Aliquam consectetur lorem eu viverra lobortis. Morbi gravida, nisi id fringilla ultricies, elit lorem eleifend lorem, Aliquam consectetur lorem eu viverra lobortis.

Donec mattis finibus elit ut tristique?

Vestibulum a lorem placerat, porttitor urna vel?

Aenean elit orci, efficitur quis nisl at, accumsan?

Pellentesque habitant morbi tristique senectus et netus?

Nam pellentesque aliquam metus?

Aenean elit orci, efficitur quis nisl at?

Morbi gravida, nisi id fringilla ultricies, elit lorem?

                
<!--accordion-01 start-->
<div class="faq-area">
    <div class="accordon-area accordion-02">
        <div class="panel-group panel-group-2" id="accordion" role="tablist"
            aria-multiselectable="true">
            <div class="panel panel-default panel-2 active">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingone">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseone" aria-expanded="true"
                            aria-controls="collapseone">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Mauris congue euismod
                                purus at semper. Morbi et vulputate massa?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapseone" class="panel-collapse collapse show"
                    role="tabpanel" aria-labelledby="headingone">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingtwo">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapsetwo"
                            aria-expanded="true" aria-controls="collapsetwo">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Donec mattis finibus
                                elit ut tristique?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapsetwo" class="panel-collapse collapse" role="tabpanel"
                    aria-labelledby="headingtwo">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. Morbi gravida, nisi id fringilla
                        ultricies, elit lorem eleifend lorem, nisi id
                        fringilla ultricies. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingthree">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapsethree"
                            aria-expanded="true" aria-controls="collapsethree">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Vestibulum a lorem
                                placerat, porttitor urna vel?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapsethree" class="panel-collapse collapse"
                    role="tabpanel" aria-labelledby="headingthree">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingfour">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapsefour"
                            aria-expanded="true" aria-controls="collapsefour">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Aenean elit orci,
                                efficitur quis nisl at, accumsan?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapsefour" class="panel-collapse collapse" role="tabpanel"
                    aria-labelledby="headingfour">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingfive">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapsefive"
                            aria-expanded="true" aria-controls="collapsefive">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Pellentesque habitant
                                morbi tristique senectus et netus?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapsefive" class="panel-collapse collapse" role="tabpanel"
                    aria-labelledby="headingfive">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingsix">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapsesix"
                            aria-expanded="true" aria-controls="collapsesix">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Nam pellentesque
                                aliquam metus?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapsesix" class="panel-collapse collapse" role="tabpanel"
                    aria-labelledby="headingsix">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. Morbi gravida, nisi id fringilla
                        ultricies, elit lorem eleifend lorem, nisi id
                        fringilla ultricies. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingseven">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapseseven"
                            aria-expanded="true" aria-controls="collapseseven">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Aenean elit orci,
                                efficitur quis nisl at?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapseseven" class="panel-collapse collapse"
                    role="tabpanel" aria-labelledby="headingseven">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. Morbi gravida, nisi id fringilla
                        ultricies, elit lorem eleifend lorem, nisi id
                        fringilla ultricies. </div>
                </div>
            </div>
            <div class="panel panel-default panel-2">
                <div class="panel-heading pannel-heaidng-2" role="tab" id="headingeight">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse"
                            data-parent="#accordion" href="#collapeight"
                            aria-expanded="true" aria-controls="collapeight">
                            <span class="plus-minus">
                                <span class="plus"><i class="fa fa-plus"></i></span>
                                <span class="minus"><i class="fa fa-minus"></i></span>
                            </span>
                            <span class="ac-heading">Morbi gravida, nisi id
                                fringilla ultricies, elit lorem?</span>
                        </a>
                    </h4>
                </div>
                <div id="collapeight" class="panel-collapse collapse" role="tabpanel"
                    aria-labelledby="headingeight">
                    <div class="panel-body"> Donec mattis finibus elit ut
                        tristique. Nullam tempus nunc eget arcu vulputate,
                        eu porttitor tellus commodo. Aliquam erat volutpat.
                        Aliquam consectetur lorem eu viverra lobortis.
                        Morbi gravida, nisi id fringilla ultricies, elit
                        lorem eleifend lorem, Aliquam consectetur lorem eu
                        viverra lobortis. Morbi gravida, nisi id fringilla
                        ultricies, elit lorem eleifend lorem, nisi id
                        fringilla ultricies. </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--accordion-01 end-->

                
/* accordion Start */
.panel-body li {
    font-size: 13px;
    text-transform: capitalize;
}
.plus,
.minus {
    color: #999999;
    display: none;
    font-size: 12px;
    height: 20px;
    line-height: 18px;
    margin-right: 5px;
    text-align: center;
    width: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.minus { display: inline-block }
a.collapsed span.plus { display: inline-block }
a.collapsed span.minus { display: none }
.panel-title > a:focus { text-decoration: none }
.panel-default > .panel-heading {
    height: auto;
    padding: 0;
}
.panel-2{
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.panel-2 .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    height: auto;
    padding: 0;
}
.panel-2 .panel-title{
    margin-bottom: 0;
}
.panel-2.active .panel-title a,
.panel-2.active .panel-title a span.plus,
.panel-2.active .panel-title a span.minus,
.panel-title a:hover span.plus,
.panel-title a:hover span.minus { color: #2395ec }
.panel-2.active { border-color: #2395ec }
.accordon-area { margin-top: 10px }
.panel-group:last-child { margin-bottom: 0 }
.panel-title > a { display: block }
.panel-heading.pannel-heaidng-2 a {
    font-size: 15px;
    height: 55px;
    line-height: 55px;
    padding: 0 0 0 25px;
}
.panel-2 .panel-title a{
    border-bottom-color: transparent;
}
.panel-2 .panel-title a:not(.collapsed){
    border-bottom: 1px solid #f5f5f5;
}
.plus-minus {
    display: inline-block;
    float: right;
    padding-right: 10px;
}
.panel-group-2 .panel { border-radius: 0 }
.panel-group-2 .panel + .panel { margin-top: 10px }
.panel-2 .panel-body { padding: 20px 25px }
/* accordion end */
.faq-heading h4 {
    font-size: 18px;
    margin: 0 0 5px;
}
.faq-heading > p {
    font-size: 15px;
    margin: 0;
}
.accordion-02 .panel-default>.panel-heading {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0
}