Sunday, September 28, 2025
HomejQueryAutomate Content material Visibility with jQuery Expire Content material Plugin

Automate Content material Visibility with jQuery Expire Content material Plugin


Expire-Content material is a tiny but helpful jQuery plugin that helps builders and entrepreneurs handle time-sensitive webpage content material.

When the present date surpasses the outlined date, the plugin marks the required content material as “expired” and hides it.

Moreover, it supplies a ‘show_af’ motion to show content material as soon as the present date exceeds the set date. Earlier than this date, the content material stays hidden.

You should use the plugin to cover outdated promotions, limited-time provides, or occasion data robotically. It’s helpful for blogs, e-commerce websites, or any platform that options time-bound content material.

Methods to use it:

1. Obtain the Expire-Content material plugin information and embrace them in your HTML file together with the most recent jQuery library.


<hyperlink rel="stylesheet" href="css/expire_content.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/expire_content.js"></script>

2. Wrap your content material inside a date_expire container and specify the expiration date utilizing information attributes.


<div class="date_expire" 
     data-month="Might" 
     data-day="15" 
     data-year="2024" 
     data-time="12:00" 
     data-hideparent="true">
     This needs to be hidden after Might 15, 2024
</div>

3. To point out content material after a particular date, add data-action="show_af" to the component:.


<div class="date_expire" 
     data-month="Might" 
     data-day="15" 
     data-year="2024" 
     data-time="12:00" 
     data-hideparent="true">
     <p class="date_expire_action" data-action="show_af">
       This content material can be proven after Might 15, 2024
     </p>
</div>

How It Works:

The plugin iterates by components with the ‘date_expire’ class, extracting the required expiration date. It then compares this date to the present date, figuring out whether or not to point out or conceal the content material primarily based on the ‘hideparent’ setting and ‘show_af’ motion.

If ‘hideparent’ is true, your complete block is hidden after the expiration date. In any other case, it checks for sub-items with the ‘date_expire_action’ class and ‘hide_af’ or ‘show_af’ actions, hiding or displaying them accordingly.


This superior jQuery plugin is developed by Costellos. For extra Superior Usages, please verify the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments