After receiving some code from a certain platform and implementing it to hide part of my form div element, I noticed that the element hides and unhides quickly when running in a browser. This rapid hiding and showing behavior occurs when clicking on the button to hide it. How can I solve this issue?
The details about what steps I have taken so far are outlined below:
.hide{
display: none !important;
visibility: hidden !important;
}
.show{
display: block;
visibility:visible;
}
<!-- begin snippet: js hide: false console: true babel: false --><html>
<head>
<title>
</title>
<script src="jquery/jquery-3.4.1.min.js"></script>
<script src="jquery/jquery-3.4.1.slim.min.js"></script>
<link rel="stylesheet" href="test.css">
<script>
$(document).ready(function() {
//console.log('hello');
$("#btn").on("click", function(){
$("#form1").addClass("hide");
})
});
//document.getElementById("form1").style.visibility="hidden";
//document.getElementById("form1").style.display="none";
</script>
</head>
<body>
<form>
<div id= "form1" class="show">
<label>Name</label>
<input type="text"/>
</div>
<br> <br>
<div id="form2">
<label>Email</label>
<input type="text"/>
</div>
<button type="submit" id="btn">more</button>
</form>
</body>
</html>