Welcome
I created this simple jquery to allow for quick show/hide of elemnts using javascript. It used data attributes to set dates that are used to either change, or hide the content on or after the date. See below for a demo.
Demo
- Test 1
- Test 2
- Test 3 hide_af
- Test 3 show_af
- Test 4 hide_af
- Test 5 hide_af
- Test 6 hide_af
- Test 4 show_af
- Test 5 show_af
- Test 6 show_af
Documentation
You will need to have jquery loaded to make this work.
Step 1
Add this to your css, or create a new css file (this is found inside the expire_content.css file)
Step 2
add the js file to the bottom of your webpage (make sure its below/after loading of jquery)
Step 3
Create the element and set you paramaters. Below is a basic example:
Below is a bit more advacned example:
Options
Below are all options available on the parent date_expire item :
| Option Code | Status | Default | Description |
|---|---|---|---|
| data-month | Required | null | This defines the month you want the block to expire |
| data-day | Required | null | This defines the day you want the block to expire |
| data-year | Required | null | This defines the year you want the block to expire |
| data-time | Optional | 00:00:00:00 | This defines the time you want the block to expire |
| data-hideparent | Optional | null | If this is set, it will ignore any sub items, and hide the whole block after the date. can only be set to true. All other options will fail |
You can have sub items that show or hide. This is useful to change only certain sub object, or to repalce whole sections on a website after a certain date.
Below are all options available on the sub item date_expire_action item:
| Option Code | Action | Description |
|---|---|---|
| data-action | hide_af | This will hide eveything inside of this block after the parent date. |
| data-action | show_af | This will show eveything inside of this block after the parent date. |