View difference between Paste ID: U5WzwbHr and 5v00EgEg

-{% javascript %}
+{%- javascript -%}
-$(document).ready(function(){
+$(document).ready(function()
-  $("#pageSearch").on("keyup", function() {
+{
-    var value = $(this).val().toLowerCase();
+    $('#pageSearch')
         // prevent the enter key from submitting the form
-    // Filter page links when Search box is updated
+        .on('keydown', function(e)
-    $(".panel-body ul li").filter(function() {
+        {
-        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+            if (e.keyCode == 13)
             {
-    });
+                e.preventDefault();
                 return false;
-    // hides/reveals panel based on the presence of search results
+
-    $( ".panel-body ul").each(function( index ) {
+        })
-
+        // Filter page links when Search box is updated
-            $(this).parent().parent().show(); // reset visibilty of panels
+        .on('keyup', function(e)
-            if($(this).children(":visible").length == 0)
+        {
             var $text = $(this),
-                //if a panel has no visible children than hide it
+                $lists = $('.search-target .panel-body > ul')
-                $(this).parent().parent().hide();
+                value = $text.val().toLowerCase();
 
             // hides/reveals panel based on the presence of search results
             $lists.each(function()
-  });
+
                 var $list = $(this),
-{% endjavascript %}
+                    $panel = $list.parents('.search-target'),
                     $children = $list.children('li'),
-{% stylesheet %}
+                    isOpen = $panel.is(':visible'),
-h2 {
+
-    margin-left:10px
+                    // Filter page links when Search box is updated
-}
+                    $matched = $children.filter(function()
-#pageSearch {
+                    {
-    margin-bottom:15px
+                        var $setting = $(this),
-}
+                            isShown = $setting.is(':visible'),
-{% endstylesheet %}
+                            isMatch = $setting.text().toLowerCase().indexOf(value) > -1;
 
-<input id="pageSearch" type="text" placeholder="Search..">
+                        $setting.toggleClass('match', isMatch);
 
-    {% if  childPage.Title != 'All Settings' %}
+                        if (isMatch && !isShown) $setting.stop(true,false).show(200);
-        <div class="panel panel-default list-as-blocks clearfix">
+                        else if (!isMatch && isShown) $setting.stop(true,false).hide(200);
-            <h2> {{ childPage.Title }}</h2>
+
                         return isMatch;
                     }),
                     matchCount = $matched.length;
 
                 //if a panel has no visible children then hide it
                 if (isOpen && matchCount == 0)
                     $panel.stop(true,false).slideUp(400);
                 else if (!isOpen && matchCount > 0)
                     $panel.stop(true,false).slideDown(400, function(){ $(this).css('height', 'auto'); });
             });
         });
 });
 {%- endjavascript -%}
 
 {%- stylesheet -%}
-    {% endif %}
+    h2 { margin-left:10px; }
     #pageSearch { margin-bottom:15px; }
 {%- endstylesheet -%}
 
-{% if IncludePageList != empty %}
+<div class="form-inline">
-<div class="panel panel-default list-as-blocks clearfix">
+    <div class="form-group">
-    <h2> Additional Pages </h3>
+        <input id="pageSearch" type="text" class="form-control input-sm" placeholder="Search&hellip;">
     </div>
 </div>
 
 {%- for childPage in Page.Pages -%}
     {%- if  childPage.Title != 'All Settings' -%}
         <div class="panel panel-default list-as-blocks search-target clearfix">
             <div class="panel-heading">
                 <h2 class="panel-title"><i class="{{ childPage.IconCssClass }}"></i> {{ childPage.Title }}</h2>
             </div>
             <div class="panel-body">
                 <ul>
-{% endif %}
+
                         <li>
                             <a href="{{ grandChildPage.Url }}" {% if grandChildPage.DisplayDescription != 'true' %} title="{{ grandChildPage.Description }}"{% endif %}>
                                 {% if grandChildPage.IconCssClass != '' %}
                                     <i class="{{ grandChildPage.IconCssClass }}"></i>
                                 {% endif %}
                                 <h3>{{ grandChildPage.Title }}</h3>
                             </a>
                         </li>
                     {%- endfor -%}
                 </ul>
             </div>
         </div>
     {%- endif -%}
 {%- endfor -%}
 
 {%- if IncludePageList != empty -%}
 <div class="panel panel-default list-as-blocks search-target clearfix">
     <div class="panel-heading"><h2 class="panel-title">Additional Pages</h2></div>
     <div class="panel-body">
         <ul>
             {%- for includedPage in IncludePageList -%}
                 {%- assign attributeParts = includedPage | PropertyToKeyValue -%}
                 <li>
                     <a href="{{ attributeParts.Value }}">{{ attributeParts.Key }}</a>
                 </li>
             {%- endfor -%}
         </ul>
     </div>
 </div>
 {%- endif -%}