<!-- accordion-1 -->
    <div class="accordion-1" id="accordion" >
    <!-- 1 -->
    <div class="panel">
    <div class="accordion-title">
    <a  data-toggle="collapse" data-parent="#accordion" href="#accor-content-1"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-1" class="panel-collapse collapse in"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    <!-- 2 -->
    <div class="panel">
    <div class="accordion-title">
    <a class="collapsed"  data-toggle="collapse" data-parent="#accordion" href="#accor-content-2"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-2" class="panel-collapse collapse"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    <!-- 3 -->
    <div class="panel">
    <div class="accordion-title">
    <a class="collapsed"  data-toggle="collapse" data-parent="#accordion" href="#accor-content-3"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-3" class="panel-collapse collapse"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    <!-- -->
    </div>

    /* accordion-1 */
    .elements-accordions .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    }
    .elements-accordions .accordion-1 .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    }
    .accordion-title {}
    .elements-accordions .accordion-title a {
    background: #f6f6f6 none repeat scroll 0 0;
    border: 1px solid #f6f6f6;
    display: block;
    font-size: 16px;
    padding: 10px 60px 10px 20px;
    position: relative;
    }
    .elements-accordions .accordion-title a.collapsed {
    background: #f6f6f6 none repeat scroll 0 0;
    color: #666;
    }
    .elements-accordions .accordion-title a::before {
    color: #ccc;
    content: "\f2f8";
    font-family: material-design-iconic-font;
    font-size: 25px;
    position: absolute;
    right: 30px;
    text-align: center;
    }
    .elements-accordions .accordion-title a.collapsed:before {
    content: "\f2f2";
    color: #ccc;
    }
    .elements-accordions .accor-content {
    padding: 15px 20px;
    border: 1px solid #F6F6F6;
    border-top: 0;
    }

    <div class="accordion-2" id="accordion2" >
    <!-- 1 -->
    <div class="panel">
    <div class="accordion-title">
    <a  data-toggle="collapse" href="#accor-content-20"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-20" class="panel-collapse collapse in"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    <!-- 2 -->
    <div class="panel">
    <div class="accordion-title">
    <a class="collapsed"  data-toggle="collapse" href="#accor-content-21"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-21" class="panel-collapse collapse"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    <!-- 3 -->
    <div class="panel">
    <div class="accordion-title">
    <a class="collapsed"  data-toggle="collapse" href="#accor-content-22"  >
    Toggles title ...
    </a>
    </div>
    <div id="accor-content-22" class="panel-collapse collapse"  >
    <div class="accor-content">
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered If you are going to use a passage Lorem Ipsum, you alteration in some form.
    </div>
    </div>
    </div>
    </div>

    /* accordion-1 */
    .elements-accordions .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    }
    .elements-accordions .accordion-1 .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    }
    .accordion-title {}
    .elements-accordions .accordion-title a {
    background: #f6f6f6 none repeat scroll 0 0;
    border: 1px solid #f6f6f6;
    display: block;
    font-size: 16px;
    padding: 10px 60px 10px 20px;
    position: relative;
    }
    .elements-accordions .accordion-title a.collapsed {
    background: #f6f6f6 none repeat scroll 0 0;
    color: #666;
    }
    .elements-accordions .accordion-title a::before {
    color: #ccc;
    content: "\f2f8";
    font-family: material-design-iconic-font;
    font-size: 25px;
    position: absolute;
    right: 30px;
    text-align: center;
    }
    .elements-accordions .accordion-title a.collapsed:before {
    content: "\f2f2";
    color: #ccc;
    }
    .elements-accordions .accor-content {
    padding: 15px 20px;
    border: 1px solid #F6F6F6;
    border-top: 0;
    }