Hide/Show html content based on a date
Last Post 31 Dec 1899 11:00 PM by . 0 Replies.
Printer Friendly
PrevPrev NextNext
Author Messages
Mark BuelsingUser is Offline
New Member
New Member

13 Jun 2016 11:34 AM Quote Reply  
I had a need to hide some text after a date passed. With the help of a forum post by jlnewman on the site (URL here - ),

I was able to set this up.

The directions for doing this in DNN follows:

1. Go to the Admin/Site Settings page and insert this line into the Stylesheet Editor and save the stylesheet:
.DateRange, .DateDiv { display: none;}

Then you will need some javascript on the page where this feature is needed. There are a number of ways to insert javascript into a page. For this example we will just use an HTML module.

2. So add a new HTML module to the page,

3. Edit the settings on the module to not show the container. (Don't hide it using permissions)

4. Edit Content on this module and then enter the html mode using the link at the bottom-left of the editor.

5. Paste the following javascript into the editor and save.

<script language=”text/JavaScript”>
$(function() {
$(".DateDiv").each(function(index) {
var sRange = $(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)

6. Then enter your content that you need to show and or hide by date. In my example I did this in another HTML module.

7. then put the HTML module in html mode, find the text that needs to be shown/hidden and surround it with the a couple spans and classes. Use the following example as a guide.

The Quick <span class="DateDiv"><span class="DateRange">6/2/2018 to 6/30/2018</span>Red </span>Fox...<p> </p>

8. Edit the dates and the text before the second </span> tag as needed.

9. Save

In this example the word "Red" will appear during the dates and disappear when the date is outside this range. You may have more content inside the span and or images or other content as well.

Quick Reply
Security Code:
Enter the code shown above in the box below.


Powered by Active Forums