Jquery Implementation for Date field, Expander and search highlighting field

Using the Jquery Expander plugin for a read more ... read less implentation to your site / project.

The source files required JS,CSS,IMAGE  Files you require for the implementation:-

 <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
   <script src="js/jquery-1.8.3.js"></script>
   <script src="js/jquery-ui-1.9.2.custom.js"></script>
    <script src="js/jquery_expander.js"></script>

In your document. ready function to need to call the datepicker function for the html element in your page
creationDate is the id of the html element.

   $("#creationDate").datepicker({dateFormat: $.datepicker.ATOM,buttonImage: 'img/calendar.png', buttonText:'', buttonImageOnly: true, constrainInput: true, showButtonPanel: false, showOn: 'button'});


Using the jquery highlight,expander plugin  will highlight your search text :

Call in your document ready function
  var keywordText=document.getElementById("keywordText").value;
      $('div.expandable p').highlight(keywordText);
      $('div.expandable p').expander(); 


 In your page the div to be expanded and text to be highlighted

<div class="expandable"><p><c:out value='${instance.col3}' escapeXml='true'/></p></div>