How to show and hide custom popup content based on a column in your datasheet

You might have some custom popup content you'd only like to display under certain circumstances.

Luckily, with just a bit of custom HTML, this is possible.

In the above example, some popups display a video and some text, while others display a photo and some text. This is achieved by hiding the photo and photo text when there is no photo. To get started with hiding content in custom popups,

    Add your custom content to your popup. In this example, we added four custom content columns to the data tab in our datasheet: an image and a video column, and a column for some text to display. We set some of our popups to display images, and some to display videos.

    When hovering over dots with only images, you'll notice that there's a space beneath them for a video – even when you haven't selected a video to display.

    To avoid this, you can create another column called "media", set this to be either "image" or "video" in your datasheet and then wrap your video in a <div> with a class of "media". Here's what our custom HTML and our datasheet look like now:
    <img src="{{image}}"/>
    <div class="{{media}}">
    <iframe src="{{video}}" width="220" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    We added a style to set the class "image" to "display:none", which makes everything in that class disappear. 

Click here to duplicate the example and get started with your own custom popups.