Archived topic
Display Container only after click? [dev5]
3 replies · Started by Sascha on January 30, 2022
Hey there,
on this page I'd the visitor can click on the "Jetzt Ratgeber starten" button or they can simply scroll down.
I would love to display a container below the header which will only show, if the visitor has clicked the button.
If they don't click it & scroll down, the container should remain invisible.
I know that I can just apply a pop-up to the button (was my first idea), but then I thought about the above-mentioned alternative.
Can you advise me how to achieve this?
Possibly provide an example, that I can replicate?
Thank you in advance and kind regards,
Sascha
Hi there,
can you share a url to the page so i can see the button ?
Oops, sorry, forgot to apply the URL to this page, now it's visible
Hi Sascha,
If they don’t click it & scroll down, the container should remain invisible.
Can you explain a bit more about the button's behavior? Will it have the capability to toggle hide/show the content?
If yes, you can try adding this script and modify some lines.
<script>
const triggerContent = document.getElementById("yourbuttontID");
const targetContent = document.getElementById("yourContentID");
var show_content_onscroll = function() {
var y = window.scrollY;
if (y >= 600) {
targetContent.classList.add("show");
} else {
targetContent.classList.remove("hide");
}
};
var show_content_onclick = function() {
targetContent.classList.toggle("hide");
};
window.addEventListener("scroll", show_content_onscroll);
triggerContent.addEventListener("click", show_content_onclick);
</script>Modify yourbuttontID in the code line const triggerContent = document.getElementById("yourbuttontID"); to the ID of your button trigger.
Modify yourContentID in the code line const targetContent = document.getElementById("yourContentID"); to the ID of the content to be shown/hidden.
