/accordion-progress-bar

## accordion-progress-bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Accordion</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style type="text/css">
    .bs-example {
    	margin: 20px;
    }

    /* progress bar */
    .progress {
        border-radius: 0px;
        height: 15px;
    }
    .progress-bar {
        background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%);
        box-shadow: none;
    }
    /* end progress bar */

    /* accordion styles */

    .panel-group .panel {
		border-radius: 0;
	}

    .panel-default>.panel-heading {
    	border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		color: #828282;
		background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
        cursor: pointer;
	}

    .panel-group .panel+.panel {
		margin-top: -1px;

	}

	.panel-default>.panel-heading.active-panel {
		background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%);
		color: #DFEFF9;
	}

	h4 {
        font-weight: 700;
	}

	.panel-body {
		height: 200px;
	}

    /* end accordion style */
</style>

</head>
<body>
<div class="bs-example">

    <div class="progress">
      <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 10%;"></div>
    </div>

    <div class="panel-group" id="accordion" class="accordion">
        <div class="panel panel-default">
            <div id="panelHeader1" class="panel-heading active-panel" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
                <h4 class="panel-title">
                    <span>PERSONAL INFORMATION</span>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Text goes here...</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div id="panelHeader2" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                <h4 class="panel-title">
                    <span>SKILLS & QUALIFICATIONS</span>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Text goes here...</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div id="panelHeader3" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                <h4 class="panel-title">
                    <span>CAREER PROFILE</span>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Text goes here...</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {

	$('#accordion > .panel').on('show.bs.collapse', function (e) {
        var heading = $(this).find('.panel-heading');
        heading.addClass("active-panel");
        setProgressBar(heading.get(0).id);

	});

	$('#accordion > .panel').on('hidden.bs.collapse', function (e) {
	    var heading = $(this).find('.panel-heading');
        heading.removeClass("active-panel");
        //setProgressBar(heading.get(0).id);
	})

    function setProgressBar(id) {
        var progressBar = document.getElementById("progress-bar");

        switch(id) {
            case "panelHeader1":
                progressBar.setAttribute("style","width:10%");
                break;
            case "panelHeader2":
                progressBar.setAttribute("style","width:50%");
                break;
            default:
                progressBar.setAttribute("style","width:100%");
        }
    }
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Example of Twitter Bootstrap 3 Accordion</title>

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<style type="text/css">
	.bs-example {
	margin: 20px;
	}

	/* progress bar */
	.progress {
	border-radius: 0px;
	height: 15px;
	}
	.progress-bar {
	background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%);
	box-shadow: none;
	}
	/* end progress bar */

	/* accordion styles */

	.panel-group .panel {
	border-radius: 0;
	}

	.panel-default>.panel-heading {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	color: #828282;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));
	cursor: pointer;
	}

	.panel-group .panel+.panel {
	margin-top: -1px;

	}

	.panel-default>.panel-heading.active-panel {
	background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%);
	color: #DFEFF9;
	}

	h4 {
	font-weight: 700;
	}

	.panel-body {
	height: 200px;
	}

	/* end accordion style */
	</style>

	</head>
	<body>
	<div class="bs-example">

	<div class="progress">
	<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 10%;"></div>
	</div>

	<div class="panel-group" id="accordion" class="accordion">
	<div class="panel panel-default">
	<div id="panelHeader1" class="panel-heading active-panel" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
	<h4 class="panel-title">
	<span>PERSONAL INFORMATION</span>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse in">
	<div class="panel-body">
	<p>Text goes here...</p>
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div id="panelHeader2" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
	<h4 class="panel-title">
	<span>SKILLS & QUALIFICATIONS</span>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse">
	<div class="panel-body">
	<p>Text goes here...</p>
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div id="panelHeader3" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
	<h4 class="panel-title">
	<span>CAREER PROFILE</span>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse">
	<div class="panel-body">
	<p>Text goes here...</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	$(document).ready(function() {

	$('#accordion > .panel').on('show.bs.collapse', function (e) {
	var heading = $(this).find('.panel-heading');
	heading.addClass("active-panel");
	setProgressBar(heading.get(0).id);

	});

	$('#accordion > .panel').on('hidden.bs.collapse', function (e) {
	var heading = $(this).find('.panel-heading');
	heading.removeClass("active-panel");
	//setProgressBar(heading.get(0).id);
	})

	function setProgressBar(id) {
	var progressBar = document.getElementById("progress-bar");

	switch(id) {
	case "panelHeader1":
	progressBar.setAttribute("style","width:10%");
	break;
	case "panelHeader2":
	progressBar.setAttribute("style","width:50%");
	break;
	default:
	progressBar.setAttribute("style","width:100%");
	}
	}
	});
	</script>
	</body>
	</html>