Markup

<section class="section-padding section-bg-1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-6">
                <h2 class="section-title">reputation <span>management</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <div class="styled-faq">                        
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" 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">
                                        Identifying Problem Source
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                    
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Reducing the visiblity of the negative information
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                        
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        Protecting brand integrity
                                        <i class="fa fa-angle-up"></i>
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                <div class="panel-body">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. nibh euismo tincidunt ut laoreet dolore magna aliquam erat volutpat.
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end styled faq-->
            </div>
        </div>
    </div>
</section>

Style

    /* Base CSS */
    .alignleft {
        float: left;
        margin-right: 15px;
    }
    .alignright {
        float: right;
        margin-left: 15px;
    }
    .aligncenter {
        display: block;
        margin: 0 auto 15px;
    }
    a:focus { outline: 0 solid }
    img {
        max-width: 100%;
        height: auto;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px;
        font-weight: 700;
    }
    body {
    
    }
    a:hover { text-decoration: none }
    
    .section-bg-1:after {background-image: url('../img/bootstrap-collapse-accordion.jpg')}
    
    .section-bg-1 {
        position: relative;
    }
    .section-bg-1::after {
        background-position: center center;
        background-size: cover;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 47%;
    }
    h2.section-title span {
        color: #19b5fe;
    }
    h2.section-title {
        font-size: 30px;
        font-weight: 700;
        text-transform: uppercase;
    }
    body {
        color: #848484;
        font-size: 15px;
        line-height: 1.7;
    }
    .styled-faq .panel-default > .panel-heading {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
        border-radius: 0;
        padding: 0;
    }
    .styled-faq .panel .panel-collapse .panel-body {
        border: medium none;
    }
    .styled-faq .panel-group .panel {
        border-radius: 0;
        box-shadow: 0 0 0;
        margin-bottom: 15px;
    }
    .styled-faq .panel .panel-heading h4 a {
        display: block;
        padding: 15px;
        position: relative;
    }
    .styled-faq .panel .panel-heading h4 a i.fa {
        display: none;
        float: right;
        font-size: 150%;
        line-height: 15px;
    }
    .styled-faq .panel .panel-heading h4 a[aria-expanded="true"] i.fa.fa-angle-down {
        display: block;
    }
    .styled-faq .panel .panel-heading h4 a[aria-expanded="false"] i.fa.fa-angle-up {
        display: block;
    }
    .section-padding {
        padding: 50px 0;
        margin: 80px 0;
    }
    .styled-faq {
        margin-top: 30px;
        min-height: 320px;
    }