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,

    1
    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.

    2
    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.

    3
    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: 
    <h1>{{species_type}}</h1>

<img src="{{image}}"/>

<p>{{info_image}}</p>

<div class="{{media}}">

<iframe src="{{video}}" width="220" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p>{{info_video}}</p>

</div>

<style>

.image{

display:none;

}

</style>

    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.

Related Articles