{"id":25672,"date":"2022-06-10T02:24:00","date_gmt":"2022-06-10T02:24:00","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=25672"},"modified":"2023-07-28T11:03:52","modified_gmt":"2023-07-28T11:03:52","slug":"jetengine-how-to-show-and-hide-content-by-date","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/","title":{"rendered":"How to Show or Hide the Content by Date Using Dynamic Visibility"},"content":{"rendered":"\n

Show\/Hide Content in Elementor<\/h2>\n\n\n\n
\n

The JetEngine<\/a> plugin allows you to set any specific conditions you need to show or hide the content. One of the main Dynamic Visibility<\/strong><\/a> <\/strong>module\u2019s features is showing and hiding content by date. So, let\u2019s find out how to implement this feature on the WordPress website.<\/p>\n\n\n\n

Show content<\/h3>\n\n\n\n

Head to the Elementor-edited page to apply the Dynamic Visibility feature. As an example, we will move to the CPT Single Page<\/a>.<\/p>\n\n\n\n

Choose the section, column, or widget to which you want to apply the Dynamic Visibility <\/strong>module. Go to the Advanced <\/strong>tab, find Dynamic Visibility,<\/strong> and toggle the Enable <\/strong>switcher.<\/p>\n\n\n\n

Primarily, choose the Visibility condition type <\/strong>in the settings<\/a>. Now we show the element according to the set conditions.<\/p>\n\n\n\n\"visibility\n\n\n\n

Open the selector and define the Condition<\/strong>. As an example, we select the \u201cGreater than\u201d option.<\/p>\n\n\n\n\"greater\n\n\n\n

Press the \u201cDynamic Tags<\/strong>\u201d button in the Field<\/strong> and select between the presented options. This time we will work with the JetEngine<\/strong> \u201cCustom Field.\u201d<\/p>\n\n\n\n\"dynamic\n\n\n\n

As we are planning to show content based on the custom field, initially create the Date or Datetime meta field. <\/p>\n\n\n\n

To do so, proceed to the JetEngine > Post Types<\/em><\/strong> <\/em>and click on the \u201cEdit<\/strong>\u201d button that appears next to the post type title.<\/p>\n\n\n\n\"custom\n\n\n\n

Once the editor is opened, scroll down to the Meta Fields <\/strong>tab and push the \u201cAdd New<\/strong>\u201d button. Fill in all the needed fields accordingly and enable the Save as timestamp <\/strong>option.<\/p>\n\n\n\n

Push the \u201cUpdate Post Type<\/strong>\u201d button.<\/p>\n\n\n\n\"jetengine\n\n\n\n

Open the post type, and proceed to the post editing. Fill in the date field and click on the \u201cUpdate<\/strong>\u201d button. Repeat this process with other posts.<\/p>\n\n\n\n\"date\n\n\n\n

Return to the Single Page editor. Select the Date\/Datetime field you have just created.<\/p>\n\n\n\n\"custom\n\n\n\n

Click on the \u201cDynamic Tags<\/strong>\u201d <\/strong>button next to the Value <\/strong>field.<\/p>\n\n\n\n\"value\n\n\n\n

Choose the JetEngine <\/strong>\u201cMacros\u201d dynamic tag and define the \u201cToday\u201d option as a Value<\/strong>.<\/p>\n\n\n\n\"date\n\n\n\n

Leave Context <\/strong>by default and pick the \u201cNumeric\u201d option in the Data Type <\/strong>field.<\/p>\n\n\n\n\"context\n\n\n\n

Once the Dynamic Visibility <\/strong>is adjusted, click on the \u201cUpdate<\/strong>\u201d button and check the custom post type posts.<\/p>\n\n\n\n

The first option date is upcoming, so we see the banner.<\/p>\n\n\n\n\"upcoming\n\n\n\n

The second option is the event that has already ended, and the banner isn\u2019t displayed here.<\/p>\n\n\n\n\"finished\n\n\n\n

This way, you can also hide some content; let\u2019s check the example.<\/p>\n\n\n\n

Hide content<\/h3>\n\n\n\n

We will create a Datetime meta field this time. However, you can also build a Date meta field if desired.<\/p>\n\n\n\n

Go to JetEngine > Post Types <\/em><\/strong>and open the post type, which posts you would like to hide.<\/p>\n\n\n\n

Scroll down to the Meta Fields <\/strong>tab and add a new meta field. <\/p>\n\n\n\n

Fill in the Label<\/strong> and move to Name\/ID<\/strong> that should contain only Latin letters in lower case, numbers, \u201c-\u201d and \u201c_\u201d characters. Leave a \u201cField\u201d Object type <\/strong>and select \u201cDatetime\u201d as a Field type<\/strong>. Don\u2019t forget to enable the Save as timestamp <\/strong>option.<\/p>\n\n\n\n

Press the \u201cUpdate Post Type<\/strong>\u201d button.<\/p>\n\n\n\n\"jetengine\n\n\n\n

Then proceed to the custom post type posts and set the Datetime values for every post you need.<\/p>\n\n\n\n

Click the \u201cDone<\/strong>\u201d button every time you want to save the Datetime field changes and the \u201cUpdate<\/strong>\u201d one to save the post.<\/p>\n\n\n\n\"datetime\n\n\n\n

Let\u2019s assume you want to display events in the listing. To do so, proceed to JetEngine > Listings<\/em><\/strong>.<\/p>\n\n\n\n

Add new or open the already created listing.<\/p>\n\n\n\n\"jetengine\n\n\n\n

We adjust all the needed Content <\/strong>and Style <\/strong>settings and move to the Advanced <\/strong>section. <\/p>\n\n\n\n

Click the Dynamic Visibility <\/strong>tab and toggle Enable Dynamic Visibility <\/strong>to set the conditions. <\/p>\n\n\n\n\"enable\n\n\n\n

Pick the \u201cHide element if condition met\u201d option as the Visibility condition type<\/strong> and \u201cLess than\u201d as a Condition<\/strong>.<\/p>\n\n\n\n

Push the Dynamic Tags <\/strong>icon to select the \u201cCustom Field\u201d option.<\/p>\n\n\n\n\"dynamic\n\n\n\n

Open the newly appeared Field<\/strong> drop-down and select the Datetime meta field you have created earlier.<\/p>\n\n\n\n\"custom\n\n\n\n

Click the Dynamic Tags <\/strong>button in the Value <\/strong>field and choose the \u201cMacros\u201d option. Among all the provided macros, pick \u201cToday.\u201d<\/p>\n\n\n\n\"today\n\n\n\n

Leave Context <\/strong>as \u201cDefault\u201d and choose \u201cNumeric\u201d in the Data type <\/strong>drop-down list.<\/p>\n\n\n\n\"context\n\n\n\n

Push the \u201cUpdate<\/strong>\u201d button and open the page where you want to place the listing.<\/p>\n\n\n\n

To place the listing, use the Listing Grid<\/strong><\/a> <\/strong>widget.<\/p>\n\n\n\n\"listing\n\n\n\n

Once ready, you can click on the \u201cPublish\/Update<\/strong>\u201d button and check the front-end result.<\/p>\n\n\n\n\"listing\n<\/div><\/div>\n\n\n\n

Adjust Dynamic Visibility in Gutenberg<\/h2>\n\n\n\n
\n

JetEngine<\/em> plugin got updated, and now it allows using Dynamic Visibility<\/strong> with the blocks of the WordPress default editor.

To apply Dynamic Visibility<\/strong><\/a>, you need to create a CPT<\/strong> and add a Date <\/strong>meta field to it. Don\u2019t forget to enable the Save as timestamp <\/strong>option.<\/p>\n\n\n\n\"meta\n\n\n\n

Make sure that the CPT posts have the needed meta field filled in with data.<\/p>\n\n\n\n\"meta\n\n\n\n

Show content<\/h3>\n\n\n\n

Open a listing template built in Gutenberg<\/a>. The following item will be displayed in a listing grid.

The goal is to show the \u201cUpcoming event!<\/em>\u201d title only for future events, and when the event has already ended, show the \u201cTour Ended!<\/em>\u201d message and hide the button.<\/p>\n\n\n\n\"listing\n\n\n\n

To show a certain element of a listing item, select the needed block and click on the eye-shaped icon on the toolbar.<\/p>\n\n\n\n\"dynamic\n\n\n\n

In a pop-up window, turn on the Enable<\/strong> toggle and proceed to set up the visibility conditions.<\/p>\n\n\n\n\"enabling\n\n\n\n

Set the Visibility condition type<\/strong> to \u201cShow element if condition met\u201d <\/strong>and hit the \u201cAdd new item<\/strong>\u201d button.

Select \u201cGreater than\u201d <\/strong>in the drop-down list.<\/p>\n\n\n\n\"greater\n\n\n\n

In the Field<\/strong>, hit the Dynamic Tags<\/strong><\/a> button and choose \u201cCustom data\u201d as a Source<\/strong>.<\/p>\n\n\n\n\"dynamic\n\n\n\n

In the Select data to show<\/strong> dropdown, choose the \u201cJetEngine meta field\u201d option and specify the Date <\/strong>meta field you previously created in the CPT below.

Set Return <\/strong>to \u201cField value.\u201d<\/p>\n\n\n\n\"data\n\n\n\n

Scroll down the Data Source<\/strong> settings window and hit the \u201cApply<\/strong>\u201d button.<\/p>\n\n\n\n\"apply\n\n\n\n

Proceed to the Value <\/strong>field. Click the Dynamic Tags<\/strong> button. Then select \u201cCustom data\u201d <\/strong>as a Source <\/strong>and choose the \u201cToday\u201d macros from the list below.

Don\u2019t forget to apply the settings.<\/p>\n\n\n\n\"conditions\n\n\n\n

Make sure to select the \u201cNumeric\u201d option in the Data type <\/strong>dropdown.<\/p>\n\n\n\n\"data\n\n\n\n

The same approach is applied to the \u201cTour ended!<\/em>\u201d message; however, this time, the Condition <\/strong>is set to \u201cLess than.\u201d

The rest of the settings are the same.<\/p>\n\n\n\n\"showing\n\n\n\n

Hide content<\/h3>\n\n\n\n

To hide the needed element, just set the Visibility condition type <\/strong>to \u201cHide element if condition met\u201d <\/strong>and set the required condition.<\/p>\n\n\n\n\"conditions\n\n\n\n

Make sure you apply the settings and update the template once you\u2019re done.

Add a listing grid to the needed page, select the listing template where you applied Dynamic Visibility and proceed to the front end.

According to the set conditions, the future event has an \u201cUpcoming event!<\/em>\u201d message. The past event that has already ended has a \u201cTour ended!<\/em>\u201d message instead of a button.<\/p>\n\n\n\n\"dynamic\n<\/div><\/div>\n\n\n\n

That\u2019s it. Now you know how to show and hide the needed content by the date on the WordPress website with JetEngine <\/em>Dynamic Visibility<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Find out how to show special offers or hide limited content on the WordPress website by date with the JetEngine Dynamic Visibility module.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[406],"yoast_head":"\nShowing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Showing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T11:03:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/visibility-condition-type-full.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/\",\"name\":\"Showing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-06-10T02:24:00+00:00\",\"dateModified\":\"2023-07-28T11:03:52+00:00\",\"description\":\"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Show or Hide the Content by Date Using Dynamic Visibility\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Showing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock","description":"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/","og_locale":"en_US","og_type":"article","og_title":"Showing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock","og_description":"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T11:03:52+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/visibility-condition-type-full.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/","name":"Showing and Hiding Content by Date with Dynamic Visibility \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-06-10T02:24:00+00:00","dateModified":"2023-07-28T11:03:52+00:00","description":"Learn how to show and hide content by the date on the WordPress website with JetEngine\u2019s Dynamic Visibility module.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-and-hide-content-by-date\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Show or Hide the Content by Date Using Dynamic Visibility"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/25672"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=25672"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=25672"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=25672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Add all the needed widgets. For instance, we have added Dynamic Image<\/strong><\/a> <\/strong>and Dynamic Field<\/strong><\/a>. As for the hiding element, we use the Heading.<\/p>\n\n\n\n