# Showing/Hiding Elements

{% hint style="info" %}
It is possible to show and hide parts of the website based on different criteria against the member. You can achieve this by adding custom data attributes to the DOM nodes (HTML tags) you want to conditionally hide / show.

You can only use this feature if you are able to add these attributes. Adding data attributes is not supported by all CMS systems.
{% endhint %}

The attributes **`data-ms-show`** and **`data-ms-hide`** control whether to show or hide the element if the criteria (the value of the data attribute) is met. Let's start with an example

```markup
<div>
  <span data-ms-show="paid">
    Awesome content!
  </span>
  <span data-ms-hide="paid">
    Sorry, you need to be on a paid plan to access this content!
  </span>
</div>
```

{% hint style="info" %}
If you want to avoid any Javascript loading delays for our data attributes (which can look like a flicker) when an element is hidden a split second after page load, we recommend you add inline styling to not display the element. For example:

```html
 <span data-ms-show="paid" style="display:none;">
   Awesome content for paid customers
 </span>
```

{% endhint %}

Keep in mind, the attributes will also do their inverse automatically. For example, the 'Awesome content!' text in the code snippet below would be hidden automatically if the member is not currently logged in and actively on a paid plan:

```html
<span data-ms-show="paid">
  Awesome content!
</span>
```

## Criteria

| <p>Criteria<br>(the value of the data attribute)</p> | Matches if                                                                                                                                                               |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| auth                                                 | Member is logged in                                                                                                                                                      |
| free                                                 | Logged in member has at least 1 free plan                                                                                                                                |
| paid                                                 | Logged in member has at least 1 paid plan                                                                                                                                |
| plan(*n*)                                            | <p>Logged in member is part of plan "<em>n</em>"</p><p></p><p>Replace "<em>n</em>" with a plan id.</p><p>Plan ids can be found at the end of the plan's signup link.</p> |
| plan(*n*,*m,*...)                                    | <p>You can also provide multiple plan ids.<br>Matches if the Member is part of any of the listed plans</p>                                                               |

{% hint style="info" %}
If you use **`data-ms-show`** and **`data-ms-hide`**&#x61;ttributes in pairs, using the same criteria (see the example above) you can make it so that either the content or a placeholder (containing a signup link?) is shown.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.memberspace.com/protecting-content/showing-hiding-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.