Bootstrap Accordion with Row Filter

Filter accordion rows using jQuery.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="row-fluid text-left">
  <span class="clearable">
        <input type="text" id="filter" placeholder="Type to Search" />
        <span class="icon_clear">x</span>
  </span>
</div>
<div class="row-fluid">
  <div class="accordion" id="accordion2">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#joeBob">Joe Bob</a>
      </div>
      <div id="joeBob" class="accordion-body collapse">
        <div class="accordion-inner">
          <label>This is Joe Bob's space</label>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#willie">Willie</a>
      </div>
      <div id="willie" class="accordion-body collapse">
        <div class="accordion-inner">
          <label>This is Willie's space</label>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#fooBar">Foo Bar</a>
      </div>
      <div id="fooBar" class="accordion-body collapse">
        <div class="accordion-inner">
          <label>This is Foo Bar's space</label>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.clearable {
  position: relative;
}

#filter {
  padding-right: 17px;
}

.accordion-heading {
  border: 1px solid gray;
}

span.icon_clear {
  right: 10px;
  position: absolute;
  cursor: pointer;
  font: 20px bold;
  color: #38468F;
}

JavaScript

$(document).ready(function() {
  $('.icon_clear').click(function() {
    $('#filter').val('');
    accordion.find('.collapse').show();
    //$('.accordion-toggle').parent().show();
  });

  $('#filter').keyup(function(event) {
    var unicode = event.charCode ? event.charCode : event.keyCode;
    if (unicode == 27) {
      $(this).val("");
    }
    var searchKey = $(this).val().toLowerCase();
    $('.accordion-toggle').each(function() {
      var cellText = $(this).text().toLowerCase();
      var accordion = $('#accordion2');
      accordion.find('.collapse.in').hide();
      if (cellText.indexOf(searchKey) >= 0) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });

  // Only allows one row to be shown at a time
  $('.accordion-toggle').click(function() {
    var $acc = $('#accordion2');
    $acc.on('show', '.collapse', function() {
      $acc.find('.collapse.in').collapse('hide');
    });
  });
});