Help Center
How to Show or Hide Section Depending on the URL Using Dynamic Visibility based on Appointments

How to Show or Hide Section Depending on the URL Using Dynamic Visibility based on Appointments

From this tutorial, you will find out how to show and hide WordPress content depending on the URL with the help of JetEngine’s Dynamic Visibility module.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetEngine plugin installed and activated

  • JetAppointment plugin installed and activated

Adjust Dynamic Visibility in Elementor

The JetEngine plugin allows you to set specific conditions to show or hide the content. Dynamic Visibility module may help you to show or hide content by the URL parameter. This tutorial will teach you how to implement this feature on the WordPress website.

Activate dynamic visibility

First of all, we need to enable the module. For this, navigate to the JetEngine > JetEngine and enable the Dynamic Visibility for Widgets and Sections toggle. After, click the “Save” button.

Now we’ll see the Dynamic Visibility option while editing in Elementor or Gutenberg Page Builder.

enable module

Show content

Add a form for booking a service created with the JetFormBuilder and JetAppointment plugins to the page with Elementor Editor. The Submit Type should be set to “Page Reload.” 

Let’s check how the URL changes when the form is submitted and when it is not.

form in elementor

This is how it looked when the form was submitted successfully.

success url

If something goes wrong, for example, we haven’t filled in all required fields, that is how the page will look.

failed url

Now let’s check how we can use these URL parameters with Dynamic Visibility. 

Add a new Section to the page you wish to display only when the form was submitted. Navigate to the Advanced Tab of the Section, find Dynamic Visibility, and enable it. 

In the Visibility condition type, select the “Show element if condition met” option and set Condition as “Equal”.

show if

In the Field, select the “Macros” option.

macros

The macro we’re searching for is “Query Variable.” The Variable Name will be “status” that we’ve already seen in the URL. Complete a Value field with a “success.”

condition for show

Now let’s add another Section with the content we need to display if the form wasn’t submitted. The settings will be the same as we set above; the only difference is that the Value in our condition will be “failed” now.

failed condition

Hide content

As we don’t want to show the form after submitting anymore, we can hide it with Dynamic Visibility. Click on the JetForm widget, move to Advanced Settings, and enable Dynamic Visibility. Now the Visibility Condition Type will be set as “Hide element if condition met”.

Here we need two conditions with the Relation type “OR”.

or relation

The Condition will be the same as we added for both sections.

The first one is for success.

success form condition

And the second one is for failed statuses.

failed form condition

Check result

Let’s look at how the feature works on the front end.

That is what users will see if they submit the form successfully.

success front

And this is what can be seen if we can’t submit the form.

failed front

Set Dynamic Visibility in Gutenberg

Let’s overview another example. For this, we need to create a Search Archive template with the help of the JetThemeCore plugin.

Navigate to Crocoblock >Theme Builder and click “Create New page template”. In the appeared pop-up, select such conditions: “Include,” “Archive,” and “Search Results.”

jetthemecore conditions

Select the “Create template” option in the body section of the newly created page template.

body template

In the pop-up, select “Block Editor” and give a name for the new template.

gutenberg template

Show content

Now let’s add such content that will be displayed on the front end only if the user enters the word, for example, “photo”.

Add an Image block to the page and, on the toolbar, click on the eye-shaped icon.

eye icon

We can now enable the Dynamic Visibility option, select the “Show element if condition met” Visibility Condition Type, and set the Condition as “Equal.”

show condition in gutenberg

In the Field, click on the Dynamic Tag button and set the Source as “Custom Data.” Then select the “Query Variable” Data to Show and complete the Variable name field with the “s” value. Don’t forget to click the “Apply button.

data source for show condition in gutenberg

As said before, the value in our case will be “photo”.

show condition value in gutenberg

After that, just close the pop-up and save the changes in the template.

Hide content

Now, let’s add a column with needed information that we want to hide for specific search requests and add the “Hide element if condition met” Visibility Condition Type.

The Field will be set up as previously. The Source will be “Custom Data,” Select Data to Show — “Query Variable” and Variable name — “s”.

The Value will be another in this case; let it be a “wedding” because our Provider doesn’t make such photoshoots.

hide condition gutenberg

Now save the changes and check the results on the live page.

Check result

This is what the result page with the “photo” search word looks like now.

show result gutenberg

And for another request, “child,” in our search, we won’t see any content where Dynamic visibility was applied.

hide result gutenberg

That’s it; now you know how to display or hide a section depending on the URL with the help of the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.