Webpage feedback form - Show/Hide with Javascript

[Phil H]

In 18.0.5/Swift, I am trying to have a button which on click displays a nested form, which on load, shows the button, not the form. When the button is clicked, the button displays the top part of the form. Filling in the form opens other parts. Mostly it works. I think though is is showing then hiding the form. I have had a look through at some of the posts on here e.g. https://community.sellerdeck.com/for...4-carosel-swap but can't quite spot what I need to do, to set it to not show the form first, then hide it.

You can see it here https://www.natalhypnotherapy.co.uk/...-packages.html

Ok I am a rookie in Javascript so sorry for any glaring errors:

<div class="d-flex justify-content-center align-items-center"><p><button class="btn theme-btn-hiLit btn-feedback" onclick="myFunction()" alt="Give or hide Feedback on this webpage button"><a id="myDIV">GIVE </a>FEEDBACK ON THIS WEBPAGE</button></p></div>
<div id="myDIV2">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">

<script src="https://www.emailmeform.com/builder/forms/jsform/rd20cVmTb3z1" type="text/javascript"></script>
</div>
<script>
window.onload = function() {
document.getElementById('myDIV2').style.display = 'none';
};
function myFunction() {
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2")
if (x.innerHTML === "GIVE ") {
x.innerHTML = "HIDE ";y.style.display = "block";
} else {
x.innerHTML = "GIVE ";y.style.display = "none";
}
}
</script>


Any advice welcome,

Kind regards

Phil

[NormanRouxel]

You need to add a type="button" to the button or it will submit the page when clicked. Also SellerDeck loads jQuery and this is a much better way of manipulating visibility. E.g. the .toggle() function shows hidden items and hides visible ones so the three things that need changing can all be done by a single .toggle(500) which also does a 1/2 second reveal.

Here's how I'd do it with no function required.

<style>.hideme {display:none;}</style>
<div class="d-flex justify-content-center align-items-center">
	<p>
		<button type="button" class="btn theme-btn-hiLit btn-feedback" onclick="$( '.showhide' ).toggle(500);" alt="Give or hide Feedback on this webpage button">
			<span class="showhide">GIVE</span><span class="showhide hideme">HIDE</span> FEEDBACK ON THIS WEBPAGE
		</button>
	</p>
</div>
<div class="showhide hideme">
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">
		<script src="https://www.emailmeform.com/builder/forms/jsform/rd20cVmTb3z1" type="text/javascript"></script>
	</actinic:block>
</div>

[Phil H]

Thanks Norman. I will give that a go.
Phil

[Phil H]

All good thanks again Norman