<div class="container">
  <h2><a href="http://jaspreetchahal.org/jquery-text-highlighter-and-filter-plugin/" target="_blank">jcOnPageFilter</a> demo</h2>
  <div class="panel panel-default">
    <div class="panel-heading">
      <form>
        <div class="form-group">
          <label for="keyword">Search term:</label>
          <input type="text" class="form-control input-sm" placeholder="Lorem" name="keyword" id="keyword">
        </div>
      </form>
    </div>
    <div class="panel-body context">
      <div class="jcorgFilterTextParent">
        <h3>This is header 1</h3>
        <div class="jcorgFilterTextChild">Hac magnis? Ac dignissim nec! Phasellus aliquet magnis nisi, cursus. </div>
      </div>
      <div class="jcorgFilterTextParent">
        <h3>This is header 2</h3>
        <div class="jcorgFilterTextChild">blah blah blah blah blah blah blah blah blah blah </div>
      </div>
      <div class="jcorgFilterTextParent">
        <h3>This is header 3</h3>
        <div class="jcorgFilterTextChild">Lorem ipsum dolor sit</div>
      </div>
      <div class="jcorgFilterTextParent">
        <h3>This is header 4</h3>
        <div class="jcorgFilterTextChild">consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et</div>
      </div>
    </div>
    <div class="panel-footer">This example is part of the article <a href="http://www.sitepoint.com/10-jquery-text-highlighter-plugins/" target="_blank">10 jQuery Text Highlighter Plugins</a> on <a href="http://sitepoint.com/" target="_blank">SitePoint</a> by <a href="https://github.com/julmot"
        target="_blank">Julian Motz</a>.</div>
  </div>
</div>

.context .jcorgFilterTextParent h3 {
  margin-top: 0;
}

.context .jcorgFilterTextParent {
  padding: 10px 0;
}

.context .jcorgFilterTextParent:not(:last-child) {
  border-bottom: 1px dashed #bdc3c7;
}


/**
 * The following is not related to the plugin
 */
body {
  background: #fbfcfc;
}

.container {
  max-width: 700px;
}

.form-group {
  margin-bottom: 5px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
}

$(function() {
  var $form = $("form");
  var $input = $form.find("input[name='keyword']");
  $input.jcOnPageFilter({
    animateHideNShow: true,
    focusOnLoad: false,
    highlightColor: "yellow",
    textColorForHighlights: "#000000",
    caseSensitive: false,
    hideNegatives: true,
    parentLookupClass: "jcorgFilterTextParent",
    childBlockClass: "jcorgFilterTextChild"
  });
});