Hi! I have a button that I’d like to use as hide/show. Whenever the button is clicked, a CTA form will be visible below it (in a separate div or section). The CTA is hidden by default, and the button is visible at all times. Is this done via JavaScript code, or will it work with Conditions or Interactions - and if it’s any of the above, how?
The button & the CTA form are on the same page but in separate divs/sections (i.e. no parent elements in common).
The problem is, I also want to have the button to have a link that jumps to the CTA section. The link works by itself & the hide/show works by itself but I can’t get both to work. (I have Hide set as CSS code to Display: none & Show set up as the Interaction). Any ideas on how this can be resolved?
I am also looking for a similar function. It would be great if someone could explain how it can be done.
You currently can’t do this, because the interaction cancels the link. So you have to do it manually.
For example.
<div id="gotodiv">Contains the cta</div>
Set this div to display:none in styles.
Add a button with url of “javascript: scroll();”
This will trigger the js scroll function on click.
Add a code block under the button with the script:
function scroll(){
var scrollMeTo = document.getElementById("gotodiv");
scrollMeTo.style.display="block";
scrollMeTo.scrollIntoView({behavior: 'smooth'}, true);
}
Don’t forget to click ‘execute code’ toggle. The script basically gets ‘gotodiv’… unhides it and then scrolls to it.