// Add your javascript here
$('document').ready(function(){
$(".accordion-dropdpwn").on('change', function(e){
var selected_value = $(this).val(),
$target_elem = $('a[href="' + selected_value + '"]');
$target_elem.trigger('click');
});
$('.accordion-toggle').on('click', function(){
var selected_value = $(this).attr('href');
$(".accordion-dropdown option").removeAttr('selected');
$('option[value="' + selected_value + '"]').attr('selected', 'selected');
});
$(".accordion-toggle").trigger('change');
});
<!DOCTYPE html>
<! http://stackoverflow.com/questions/15231707/twitter-bootstrap-collapse-triggered-with-a-select >
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<select class="accordion-dropdpwn">
<option selected="selected" value="#panel1" data-parent="#accordion">1</option>
<option value="#panel2" data-parent="#accordion">2</option>
<option value="#panel3" data-parent="#accordion">3</option>
<option value="#panel4" data-parent="#accordion">4</option>
<option value="#panel5" data-parent="#accordion">5</option>
</select>
<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#panel1">Panel 1</a>
</div>
<div class="accordion-body collapse" id="panel1">
<div class="accordion-inner">
<p>This is accordion panel 1 content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#panel2">Panel 2</a>
</div>
<div class="accordion-body collapse" id="panel2">
<div class="accordion-inner">
<p>This is accordion panel 2 content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#panel3">Panel 3</a>
</div>
<div class="accordion-body collapse" id="panel3">
<div class="accordion-inner">
<p>This is accordion panel 3 content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#panel4">Panel 4</a>
</div>
<div class="accordion-body collapse" id="panel4">
<div class="accordion-inner">
<p>This is accordion panel 4 content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#panel5">Panel 5</a>
</div>
<div class="accordion-body collapse" id="panel5">
<div class="accordion-inner">
<p>This is accordion panel 5 content</p>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* Put your css in here */
.accordion-body {background: #f90;}