filter table

by khemikal

HTML

<div class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p>
      <input type="checkbox" name="option1" value="1030">&nbsp;10-30
    </p>
    <p>
      <input type="checkbox" name="option1" value="4060">&nbsp;40-60
    </p>
    <p>
      <input type="checkbox" name="option1" value="7090">&nbsp;70-90
    </p>
    <p>
      <input type="checkbox" name="option1" value="all">&nbsp;10-90
    </p>
    <p>
      <input type="submit" value="Apply" name="commit" id="message_submit" />&nbsp;
      <input type="submit" value="Cancel" name="cancelit" id="cancel" />
    </p>
  </form>
</div>

<p id="contact">Filter</p>

CSS

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 110px;
  z-index: 50;
  padding: 25px 25px 20px;
}

p:not(#contact) {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
  text-align: center;
}

.messagepop p,
.messagepop.div {
  margin: 8px 0;
  padding-bottom: 8px;
}

JavaScript

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });
}

$(function() {
  $('#contact').on('click', function() {
    if ($(this).hasClass('selected')) {
      deselect($(this));
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({
    opacity: 'toggle',
    height: 'toggle'
  }, 'fast', easing, callback);
};