"Steps Progress and Details"
Bootstrap 3.3.0 Snippet by azlanidris

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container" style="margin-top: 100px; margin-bottom: 100px;"> <div class="row"> <div align="center" style="padding-bottom:50px;"><h1>How It Works</h1></div> </div> <div class="row"> <div class="progress" id="progress1"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> </div> <span class="progress-type">Overall Progress</span> <span class="progress-completed">0%</span> </div> </div> <div class="row"> <div class="row step"> <div style="padding-top: 4px;" id="div1" class="col-md-2 activestep" onclick="javascript: resetActive(event, 0, 'step-1');"> <span><img src="http://rahsiaimportchina.com/wp/wp-content/uploads/2015/10/logo-2.png"></span> <p>RICH Members Only</p> </div> <div class="col-md-2" onclick="javascript: resetActive(event, 10, 'step-2');"> <span class="fa fa-pencil"></span> <p>Register Wth Ezicargo</p> </div> <div class="col-md-2" onclick="javascript: resetActive(event, 20, 'step-3');"> <span class="fa fa-qrcode"></span> <p>Shipping Code</p> </div> <div class="col-md-2" onclick="javascript: resetActive(event, 30, 'step-4');"> <span class="fa fa-shopping-bag"></span> <p>Purchase</p> </div> <div class="col-md-2" onclick="javascript: resetActive(event, 40, 'step-5');"> <span class="fa fa-cube"></span> <p>Create Parcel</p> </div> <div id="last" class="col-md-2" onclick="javascript: resetActive(event, 50, 'step-6');"> <span class="fa fa-plus-square-o"></span> <p>Extra Services</p> </div> </div> <div class="row step"> <div id="last" class="col-md-2" onclick="javascript: resetActive(event, 60, 'step-7');"> <span class="fa fa-cubes"></span> <p>Create Shipment</p> </div> <div id="last" class="col-md-2" onclick="javascript: resetActive(event, 80, 'step-8');"> <span class="fa fa-tag"></span> <p>Tracking Number</p> </div> <div id="last" class="col-md-2" onclick="javascript: resetActive(event, 100, 'step-9');"> <span class="fa fa-star"></span> <p>Done</p> </div> </div> </div> <div class="row setup-content step activeStepInfo" id="step-1"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 1</h1> <h3 class="underline">Instructions</h3> Firstly before you are able to register with our service, your should be a member of closed group Rahsia Import China (RICH).<br> If you are not a member yet, please proceed for registration on RICH website by clicking the image below.<br> <div style="margin-top:10px;"><a href="http://rahsiaimportchina.com" target="_blank"><img src="http://i67.tinypic.com/10cksk8.jpg" width=640 height=297></a></div> </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-2"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 2</h1> <h3 class="underline">Instructions</h3> <span style="color: #FF0000;">Note: Only RICH members are allowed to register with Ezicargo</span><br> Members of RICH can proceed to registration at this <a href="/register" target="_self">link</a>. We will check every new registration against RICH registration list. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-3"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 3</h1> <h3 class="underline">Instructions</h3> User will be given an shipping CODE = Shipping mark identification number.<br> Shipping code (Ezi ID) only will be given after registration fee is paid. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-4"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 4</h1> <h3 class="underline">Instructions</h3> <p>Purchase online/offline from anywhere/anyplace/anyweb in China.<br> Make sure give your Ezi ID as your name if you make a purchase or register any China's ecommerce website . Now your name is changed to your Ezi ID.</p> <p>Ezicargo warehouse address should be given to seller/supplier as your shipping address either you purchase online or offline from China's seller.</p> </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-5"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 5</h1> <h3 class="underline">Instructions</h3> Create your parcel in our system after you made purchases.<br> Your parcel will be waiting in the system until the goods are arrived at our warehouse in China. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-6"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 6</h1> <h3 class="underline">Instructions</h3> Select From many services provided by Ezicargo to ensure your products are correct and your parcel is in good shape for shipment. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-7"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 7</h1> <h3 class="underline">Instructions</h3> Create your shipments individually or combine several parcels together and shipout at once. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-8"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 8</h1> <h3 class="underline">Instructions</h3> Receive your tracking number after 1 day and your goods after 4-7days.<br> Tracking number only be given for Air Freight service only. Sea Freight has no tracking number, receive your goods after 14-21 days. </div> </div> </div> <div class="row setup-content step hiddenStepInfo" id="step-9"> <div class="col-xs-12"> <div class="col-md-12 well text-center"> <h1>STEP 9</h1> <h3 class="underline">Instructions</h3> Finally sit back and relax, your goods are on its way. If your membership is still active, the flow is repeat from step 4 to 9. </div> </div> </div> </div>
.hiddenStepInfo { display: none; } .activeStepInfo { display: block !important; } .underline { text-decoration: underline; } .step { margin-top: 27px; } .progress { position: relative; height: 25px; } .progress > .progress-type { position: absolute; left: 0px; font-weight: 800; padding: 3px 30px 2px 10px; color: rgb(255, 255, 255); background-color: rgba(25, 25, 25, 0.2); } .progress > .progress-completed { position: absolute; right: 0px; font-weight: 800; padding: 3px 10px 2px; } .step { text-align: center; } .step .col-md-2 { background-color: #fff; border: 1px solid #C0C0C0; border-right: none; } .step .col-md-2:last-child { border: 1px solid #C0C0C0; } .step .col-md-2:first-child { border-radius: 5px 0 0 5px; } .step .col-md-2:last-child { border-radius: 0 5px 5px 0; } .step .col-md-2:hover { color: #428BCA; cursor: pointer; } .step .activestep { color: #428BCA; height: 100px; margin-top: -7px; padding-top: 7px; border-left: 6px solid #FF0000 !important; border-right: 6px solid #FF0000 !important; border-top: 3px solid #FF0000 !important; border-bottom: 3px solid #FF0000 !important; vertical-align: central; } .step .fa { padding-top: 15px; font-size: 40px; }
function resetActive(event, percent, step) { $(".progress-bar").css("width", percent + "%").attr("aria-valuenow", percent); $(".progress-completed").text(percent + "%"); $("div").each(function () { if ($(this).hasClass("activestep")) { $(this).removeClass("activestep"); } }); if (event.target.className == "col-md-2") { $(event.target).addClass("activestep"); } else { $(event.target.parentNode).addClass("activestep"); } hideSteps(); showCurrentStepInfo(step); } function hideSteps() { $("div").each(function () { if ($(this).hasClass("activeStepInfo")) { $(this).removeClass("activeStepInfo"); $(this).addClass("hiddenStepInfo"); } }); } function showCurrentStepInfo(step) { var id = "#" + step; $(id).addClass("activeStepInfo"); }

Related: See More

Questions / Comments: