panel without IDs

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="panel-group collapse-all-but-one">
    <div class="panel panel-primary panel-collapsible>
        <div class="panel-heading">Click me to collapse</div>
        <div class="panel-body">I will collaaaaaaapse</div>
    </div>
    <div class="panel panel-warning panel-collapsible">
        <div class="panel-heading">Hey another one</div>
        <div class="panel-body">I will close when the other one opens</div>
    </div>
</div>

JavaScript

$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
    e.preventDefault();
    
    // Try to close all of the collapse areas first
    var parent_id = $(this).data('parent');
    $(parent_id+' .panel-collapse').collapse('hide');

    // ...then open just the one we want
    var $target = $(this).parents('.panel').find('.panel-collapse');
    $target.collapse('toggle');
});