Showing and hiding elements on the page

Oops! Another technical article for you! This time for sales pages.

The show/hide feature is very important for digital marketing people when building landing pages, that is, building sales pages for their products.

One of the most used sales strategies is the clean landing page with just a strong headline at the top and a sales video right below.

Throughout the video, usually at the moment when the producer believes that the lead is ready to buy the product, several elements appear on the previously “empty” page.

We have many producers, just like you, who use Panda to host videos for their landing pages and that's why this article aims to help you, with a script that hides elements of your page and shows at the most coherent moment for your marketing strategy. sales 😉

This article proposes configuring script in Elementor. Anyway, you can easily adapt to pages built through other programming.
Let's go step by step:

You must build your page with all the elements you want, even the ones you want to hide.
Next, all elements that you want to hide and show in the same timeframe need to have the CSS Class named panda. See the illustration below:

Naming the Element Classes
Below all elements add an HTML element element at the end of the section.
Copy the script below, paste it inside an HTML element and click the green Update button.

<style> 
    .panda {
        display: none
    }
</style>
<script>
    const SECONDS_TO_DISPLAY = 3;
    const CLASS_TO_DISPLAY = 'panda';
    const IFRAME_ID = 'INSERIR_ID'
    const API_ENDPOINT = 'https://player.pandavideo.com.br/api.v2.js'

    if(!document.querySelector(`script[src='${API_ENDPOINT}']`)) { 
        let s = document.createElement('script'); 
        s.src = API_ENDPOINT; 
        s.async = true; 
        document.head.appendChild(s);
    }

    window.pandascripttag = window.pandascripttag || [];
    window.pandascripttag.push(function () {
        const p = new PandaPlayer(IFRAME_ID , {
            onReady() {
                const el = document.querySelectorAll(`.${CLASS_TO_DISPLAY}`);
                p.onEvent(e => {
                const type = e.message
                if(type === 'panda_timeupdate'){
                    const { currentTime, isMutedIndicator } = e;
                    if (isMutedIndicator) return;
                    if (currentTime < SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'none'
                        })
                    } else if (currentTime > SECONDS_TO_DISPLAY) {
                        el.forEach(e => {
                            e.style.display = 'block'
                        })
                    }
                }
                })
            }
        });
    })
</script>


The script time unit is in seconds. To choose the right time according to your strategy, just change the number 3 in const SECONDS_TO_DISPLAY = 3 that is in the script to the time in second you want the elements to appear.

To specify which video you want the script to run on, simply change the const IFRAME_ID = 'INSERT_ID' to the id of the video's iframe code. Ex: const IFRAME_ID = 'panda-3b101f05-84aa-4de0-9b64-71f1855388af'

The illustration below represents the steps above, please note:

Pasting the script into an Elementor HTML element
To check the configuration you made, just view your page in an incognito tab and check if the elements are appearing at the right time.

Elements appearing after 3 seconds
Conclusion

In this article we saw how to hide/show elements on your sales page.

If you have any issues or questions about this setup, please submit a support request so that a member of our team can help you, or chat with us.
Was this article helpful?
Cancel
Thank you!