Utilizing bootstrap 4 and jquery for an HTML page, I aim to switch the appearance of my elements before and after a button click. The below jquery code reveals this functionality, while the complete module code is available on codepen.
HTML code
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="login-part col-lg-6">
<!-- Additional HTML code here -->
</body>
</html>
CSS
.row-loginpart {
margin-top: 8rem;
}
.btn {
width: 100%;
}
.dropdown-menu {
width: 95%;
}
<!-- More CSS styling -->
jquery code
var timesClicked = 0;
$(".reg-user-btn").on("click", function () {
// Jquery functionality code here
});
https://codepen.io/tk1017/pen/xxZwmgY
Despite confirming that the event handler is triggered with each click, my elements fail to revert to their original positions upon subsequent clicks of the button. Any thoughts on why this may be happening?
Note: Due to the presence of numerous scripts and CDNs in the HTML code, please focus solely on the content within the body section.