how to display a Widget on click event with slide effect

Slide Elementor Widget on Click Event

---------------------- JS Script -----------------------------

JS Script (Place in content as HTML Widget under Content Widet!) - Footer is the best place for it.

<script>
var getbutton = document.getElementById("buttonID"); // insert Button ID

getbutton.addEventListener('click', displayContent);

function displayContent() {
    document.getElementById("TextID").classList.add("vtext_visible");  // insert Text/Content ID
    var gettext = document.getElementById("TextID"); // insert Text/Content ID
    gettext.addEventListener('click', hideContent);
}

function hideContent() {
    document.getElementById("TextID").classList.remove("vtext_visible"); // insert Text/Content ID
}

</script>




------------------ CSS ---------------------
Place CSS on Page, theme, or anywhere. (only one Time on full Page)

.vtext {
    opacity:0;
    visibility: hidden;
    z-index:-9999;
}

.vtext_visible {
    opacity:1;
    visibility: visible;
    z-index:10;
    animation: 1s slide-right 0s forwards;
    transform:translateX(-100%);
}
@keyframes slide-right {
  to {
    transform:translateX(0);
  }
}


------------------ Widget Elementor -----------------
Column, Section — according to needs: 
Add CSS - ID "showpopup01" to the upper Column where you wish to hear

Element to show — for example Text Element:
place inside the Column, Section a "Text Widget" and add class "vtext" and add the CSS ID "text01"