ToggleElementsOnScreen.js

// assumes that the title content is lowercase.
// I'm aware of the duplication of some functionality. 
// this is just a POC for the work I'm doing on ccs. :)

$(function() {
  var $allSessions = $('#content .show'),
      elementsAndTitles = $.map($allSessions, function(sessionElement) {
        var $session = $('h3 a', sessionElement);
        return {
          $session: $session,
          title: $session.text() // may need to use .html()
        }
      });
  $("<input>", {
    "placeholder" : "type to filter by title",
    class: "search",
    keyup: function(eventData) {
      var searchTerm = this.val(),
          matchingTitlesAndElements = $.grep(elementsAndTitles, function(elementAndTitle) {
            return elementAndTitle.title.indexOf(searchTerm) !== -1;
          }) ;
      $allSessions.hide();
      $.each(matchingTitlesAndElements, function() {
        this.$session.show();
      });
    }
  }).appendTo("#content h4");
}