Hide Elements Once Expiry Date/Time Is Reached - jQuery jqExpire

File Size: 6.5 KB
Views Total: 786
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Hide Elements Once Expiry Date/Time Is Reached - jQuery jqExpire

jqExpire is a tiny jQuery plugin that allows you to automatically hide any specified elements after an expiration date/time.

Sometimes you want to display information on your site that only needs to be shown during particular times. An example might be event timetables or notices with deadlines. It's good practice not to permanently display this kind of information on the assumption that visitors may not be getting around to viewing it.

This plugin will give you the ability to manage time-sensitive content, which should be removed once it has expired. This can be useful for pages with upcoming/ongoing event notices or forms that have a cut-off time. 

How to use it:

1. Download and load the jquery.jqExpire.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.jqExpire.js"></script>

2. Specify the expiration date in the data-expire attribute.

<div data-expire="2022-12-25">
  <p>This element should be hidden after 2022-12-25.</p>
</div>

<div data-expire="2021-12-25">
  <p>This element should be hidden now.</p>
</div>

3. Initialize the plugin and done.

$(function(){
  $().jqExpire();
});

4. You can also specify the expiration date in the JavaScript during init.

<div id="example">
  <p>This element should be hidden after 2022-12-25.</p>
</div>
$(function(){
  $('#example').jqExpire('2022-12-25');
});

This awesome jQuery plugin is developed by aalaap. For more Advanced Usages, please check the demo page or visit the official website.