<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="default.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<section id="how-to">
<!-- Super Accordion -->
<div class="panel-group" id="superaccordion">
<!-- Accordion 1 -->
<div class="panel">
<div class="panel-heading parent">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#superaccordion" href="#collapse1" aria-expanded="false">
<img src="https://s3-ap-southeast-1.amazonaws.com/media.go-jek.com/gopay_platformicon/bca.jpg" class="img-responsive" width="100px">
</a>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion1">
<div class="panel">
<div class="panel-heading child">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1A" aria-expanded="false">ATM BCA
</a>
</h4>
</div>
<div id="collapse1A" class="panel-collapse collapse">
<div class="panel-body">
<div class="inside-body">
<ol class="list-group vertical-steps">
<li class="list-group-item"><span>Masukkan kartu ATM dan PIN BCA Anda</span></li>
<li class="list-group-item"><span>Masuk ke menu TRANSFER dan klik BCA Virtual Account</span</li>
<li class="list-group-item"><span>Masukkan kode perusahaan untuk GO-JEK: 70001 dan nomor telepon yang terdaftar pada aplikasi (Contoh: 700010812XXXXXX)</span></li>
<li class="list-group-item"><span>Masukkan jumlah top up yang diinginkan</span></li>
<li class="list-group-item"><span>Ikuti instruksi untuk menyelesaikan transaksi</span></li>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading child">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse1B" aria-expanded="false">Collapsible Group Item #3.2
</a>
</h4>
</div>
<div id="collapse1B" class="panel-collapse collapse">
<div class="panel-body">
<div class="inside-body">
Konten
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Accordion 1 -->
<!-- Accordion 2 -->
<div class="panel">
<div class="panel-heading parent">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#superaccordion" href="#collapse2" aria-expanded="false">
<img src="https://s3-ap-southeast-1.amazonaws.com/media.go-jek.com/gopay_platformicon/mandiri.jpg" class="img-responsive" width="100px">
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion2">
<div class="panel">
<div class="panel-heading child">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2A" aria-expanded="false">Collapsible Group Item #3.1
</a>
</h4>
</div>
<div id="collapse2A" class="panel-collapse collapse">
<div class="panel-body">
<div class="inside-body">
<ol class="list-group vertical-steps">
<li class="list-group-item"><span>Masukkan kartu ATM dan PIN BCA Anda</span></li>
<li class="list-group-item"><span>Masuk ke menu TRANSFER dan klik BCA Virtual Account</span</li>
<li class="list-group-item"><span>Masukkan kode perusahaan untuk GO-JEK: 70001 dan nomor telepon yang terdaftar pada aplikasi (Contoh: 700010812XXXXXX)</span></li>
<li class="list-group-item"><span>Masukkan jumlah top up yang diinginkan</span></li>
<li class="list-group-item"><span>Ikuti instruksi untuk menyelesaikan transaksi</span></li>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading child">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2B" aria-expanded="false">Collapsible Group Item #3.2
</a>
</h4>
</div>
<div id="collapse2B" class="panel-collapse collapse">
<div class="panel-body">
<div class="inside-body">
Konten
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Accordion 2 -->
</div>
<!-- End of Super Accordion -->
</section>
<script src="default.js"></script>
</body>
</html>
body{
padding:20px;
background-color: #ecf0f1;
}
/*Vertical Steps*/
.inside-body{
padding:25px;
}
.list-group.vertical-steps .list-group-item{
border:none;
border-left:3px solid #0052c2;
box-sizing:border-box;
border-radius:0;
counter-increment: step-counter;
padding-left:20px;
padding-right:0px;
padding-bottom:20px;
padding-top:0px;
}
.list-group.vertical-steps .list-group-item.active{
background-color:transparent;
color:inherit;
}
.list-group.vertical-steps .list-group-item:last-child{
border-left:3px solid transparent;
padding-bottom:0;
}
.list-group.vertical-steps .list-group-item::before {
border-radius: 50%;
background-color:#0052c2;
color:#fff;
content: counter(step-counter);
display:inline-block;
float:left;
height:25px;
line-height:25px;
margin-left:-35px;
text-align:center;
width:25px;
}
.list-group.vertical-steps .list-group-item span,
.list-group.vertical-steps .list-group-item a{
display:block;
overflow:hidden;
padding-top:2px;
}
/* End of Vertical Step */
#how-to .panel-group .panel{
border-radius:0px;
border: 0px;
}
#how-to .panel-group{
margin:0px;
}
#how-to .panel-heading{
padding:0px !important;
border-radius: 0px;
}
#how-to .parent a{
display: block;
text-decoration: none;
padding:25px;
}
#how-to .child a{
display: block;
text-decoration: none;
padding:25px;
}
#how-to .parent{
background-color: #fff !important;
}
#how-to .child{
background-color: #f2f2f2 !important;
}
#how-to .panel-body{
border: none;
}
#how-to .panel-body{
padding:0px;
}
#how-to .panel-group .panel+.panel{
margin:0px;
}
#how-to .panel-group .parent{
border-bottom: 1px solid #ecf0f1;
}
#how-to .panel-group .child{
border-bottom: 1px solid #FDFDFD;
}
#superaccordion{
box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.panel-heading a:after {
content: "";
position: relative;
top: 1px;
right:10px;
display: inline-block;
font-style: normal;
font-weight: 700;
font-size:14pt;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
color:#333;
}
.panel-heading a[aria-expanded="true"]:after {
content: "\2212";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.panel-heading a[aria-expanded="false"]:after {
content: "\002b";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.parent a:after{
content: "";
position: relative;
top: -15px;
right:10px;
display: inline-block;
line-height: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
color:#333;
}