All Pages

Conditional Content Helper Classes

Hide / Show based on another fields value

In Memorial / In Honor Giving (add to form component)

A utility class to hide/show a component based on in memorial / in honor giving.

  • inmem-Y = Show component if tribute giving option is checked and value is Y

Giving Frequency

You should know!

Giving frequency utility classes can also be used on thank you pages

Utility classes to hide/show a component based on giving frequency.

ClassDescriptionUsable on Thank You Pages
recurring-frequency-y-hideHides component when recurring gift frequency is YYes
recurring-frequency-y-showShows component when recurring gift frequency is YYes
recurring-frequency-n-hideHides component when recurring gift frequency is NYes
recurring-frequency-n-showShows component when recurring gift frequency is NYes
recurring-frequency-annual-hideHides component when recurring gift frequency is AnnualYes
recurring-frequency-annual-showShows component when recurring gift frequency is AnnualYes
recurring-frequency-monthly-hideHides component when recurring gift frequency is MonthlyYes
recurring-frequency-monthly-showShows component when recurring gift frequency is MonthlyYes
recurring-frequency-onetime-hideHides component when recurring gift frequency is One-TimeYes
recurring-frequency-onetime-showShows component when recurring gift frequency is One-TimeYes
recurring-frequency-quarterly-hideHides component when recurring gift frequency is QuarterlyYes
recurring-frequency-quarterly-showShows component when recurring gift frequency is QuarterlyYes
recurring-frequency-semi-annual-hideHides component when recurring gift frequency is Semi-AnnualYes
recurring-frequency-semi-annual-showShows component when recurring gift frequency is Semi-AnnualYes

Gift Type

Utility classes to hide/show a component based on gift type.

ClassDescriptionUsable on Thank You Pages
giveBySelect-CardShow component when Give by Card is selectedYes
giveBySelect-ACHShow component when Give by Check is selectedYes
giveBySelect-PaypalShow component when Give by Paypal is selectedYes

Hide any element based on the selected value of a checkbox or radio select field

You should know!

These classes can also be used on thank you pages

You should know!

Note that this does not work for other field types (e.g. Select, Input, Textarea, etc..)

To start you need to get the root name of the field you want to base this condition on. The easiest way to do this is to grab it from the top level Label. By using this you can hide an element based on the value of another Checkbox or Radio select fields.

Steps for creating a custom class:

Example Label:

<label for="en__field_supporter_questions_600302" class="en__field__label" style="" id="en__field__label--e4hhk">I would like to get text messages:</label>
  1. Grab the for value from the label of the field you want to base this conditional class around
  • en__field_supporter_questions_600302
  1. Change en to engrid
  • engrid__field_supporter_questions_600302
  1. Remove the word field_ and note the remaining double underscore after engrid
  • engrid__supporter_questions_600302
  1. Remove the _ after supporter and anywhere else they appear
  • engrid__supporterquestions600302
  1. Now you have your base class, and you can append the value that will be used so that the content with that class will only be visible when that value is selected. By appending a hyphen and the field value-Y this class will make it so the encapsulated is only visible when that corresponding field's value is Y, otherwise it will be hidden.
  • engrid__supporterquestions600302-Y

Dynamic Content Based on Amount (added as classes on content)

You should know!

These classes can also be used on thank you pages

Utility classes to hide/show a component based on giving amount.

showifamount-{operand}-{value}

You should know!

showifamount- classes can also be used on thank you pages

Operands:

  • lessthan - Shows component when giving amount is less than {value} - Example:
showifamount-lessthan-10
  • lessthanorequalto - Shows component when giving amount is less than or equal to {value} - Example:
showifamount-lessthanorequalto-10
  • equalto - Shows component when giving amount is exactly equal to {value} - Example:
showifamount-equalto-10
  • greaterthanorequalto - Shows component when giving amount is greater than or equal to {value} - Example:
showifamount-greaterthanorequalto-10
  • greaterthan - Shows component when giving amount is greater than {value} - Example:
showifamount-greaterthan-10
  • between - Shows component when giving amount is between {valuemin} and {valuemax} - Example:
showifamount-between-10-100

Animation classes for dynamic content:

ClassDescription
animate-replaceWill animate the content switch using scale
animate-vertical-slideWill animate the content switch using max-height

Hide / Show based on URL arguments

Hide any element via URL arguments using a Class or ID

By using one of the following you can hide any content based on its class or ID with a URL argument.

Example: https://website.org/page/12345/donate/1?engrid_hide[header-logo]=id

engrid_hide[element]=id
engrid_hide[element]=class

Hide / Show based on presence of question

You should know!

These classes can also be used on thank you pages

Special classes can be used to hide elements if certain supporter questions are present or absent on the page.

Typically, this can be used to hide elements, such as lead-in copy, when an opt-in question is not rendered on the page because the supporter came from a campaign link and is already opted in, so EN doesn't render the question on the page. But it can be used in other ways too.

The class format looks like this:

  • Show this element when the supporter question is present:
engrid__supporterquestions{id}-present
  • Show this element when the supporter question is absent:
engrid__supporterquestions{id}-absent

You should know!

The {id} is the id of the supporter question. This can be found by inspecting the element on the page

It's also possible to combine multiple questions using the following format. These examples show 2 questions, but you can use as many as you like:

  • Show this element when EITHER question is present:
engrid__supporterquestions{id1}__supporterquestions{id2}-present
  • Show this element when EITHER question is absent:
engrid__supporterquestions{id1}__supporterquestions{id2}-absent

Previous
Exit Intent Lightbox