<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div id="section1">
    <h3>
        Light Color
    </h3>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-light">
            <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">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
        <div class="panel panel-light">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
        <div class="panel panel-light">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
    </div>
</div>
<div id="section2">
    <h3>
        Dark Color
    </h3>
    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
        <div class="panel panel-dark">
            <div class="panel-heading" role="tab" id="headingOneDark">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneDark" aria-expanded="true" aria-controls="collapseOneDark">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOneDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneDark">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
        <div class="panel panel-dark">
            <div class="panel-heading" role="tab" id="headingTwoDark">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoDark" aria-expanded="false" aria-controls="collapseTwoDark">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwoDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoDark">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
        <div class="panel panel-dark">
            <div class="panel-heading" role="tab" id="headingThreeDark">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeDark" aria-expanded="false" aria-controls="collapseThreeDark">
                        <i class="indicator fa fa-caret-right">
                        </i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThreeDark" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeDark">
                <div class="panel-body">
                    Liebe ist eine Frucht der Gefühle die starke Zuneigung und persönlichen Interessen. Im Zusammenhang mit der Philosophie der Liebe, die geerbt die Natur des guten Yg das ganze Gefühl der Güte, Mitgefühl und Zuneigung.
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <h4>
        visit :
        <b>
            www.fostrap.com
        </b>
    </h4>
</footer>

@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  font-family: 'Roboto', sans-serif;
} 
h3 {
  text-align:center; 
  font-size: 2em; 
  color: #9E9E9E;
  margin-top:0;
}
h3::after {
    content: "";
    height: 2px;
    display:block;
    background-color: #9E9E9E;
    width: 50px;
    margin: 10px auto 15px;
    text-align: center;
}

#section1 {
  background-color: #FFF; 
  padding: 15px 20px;
}
#section2 {
  background-color: #212121; 
  padding: 15px 20px;
}
@media (min-width: 600px) {
  #section1, #section2 {
    padding: 15px 100px;
  }
}
@media (min-width: 1030px) {
  #section1, #section2 {
    padding: 15px 450px;
  }
}
/********************/
/* Panel dark color */
/********************/
.panel-dark {
    background: #424242;
    border: 0;
    border-radius: 0 !important;
    box-shadow: 0px 0px 0px transparent;
    color: #FFF;
    margin-top:0;
}
.panel-dark .panel-heading {
    padding: 0;
}

.panel-dark .panel-dark {
    background: #616161;
}

.panel-dark .panel-body {
    border-color: rgba(255, 255, 255, 0.10) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0px -1px 0px #212121;
}

.panel-dark .panel-title > a {
    color: #FFF;
    display: block;
    padding: 10px 15px;
    text-decoration: none !important;
}

.panel-dark .panel-title > a:hover {
    background: rgba(0, 0, 0, 0.1);
}

.panel-dark .panel-title > a:focus {
    outline: none;
}

/********************/
/* Panel light color */
/********************/
.panel-light {
    background: #E0E0E0;
    border: 0;
    border-radius: 0 !important;
    box-shadow: 0px 0px 0px transparent;
    color: #000;
    margin-top:0;
}
.panel-light .panel-heading {
    padding: 0;
}

.panel-light .panel-light {
    background: #E0E0E0;
}

.panel-light .panel-body {
    border-color: rgba(255, 255, 255, 0.10) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0px -1px 0px #BDBDBD;
}

.panel-light .panel-title > a {
    color: #000;
    display: block;
    padding: 10px 15px;
    text-decoration: none !important;
}

.panel-light .panel-title > a:hover {
    background: rgba(0, 0, 0, 0.1);
}

.panel-light .panel-title > a:focus {
    outline: none;
}

footer {
  text-align: center;
  margin: 15px;
}
footer h4{
  font-size: 2.92rem;
  font-weight:100;
    margin: 1.46rem 0 1.168rem; 
}

  function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find("i.indicator")
        .toggleClass('fa-caret-right fa-caret-down');
}
  $('#accordion').on('hidden.bs.collapse', toggleChevron);
  $('#accordion').on('shown.bs.collapse', toggleChevron);
  $('#accordion2').on('hidden.bs.collapse', toggleChevron);
  $('#accordion2').on('shown.bs.collapse', toggleChevron);