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.

Still need help? Contact Us Contact Us