Custom checkout button in checkout.liquid

Custom checkout button in checkout.liquid - javascript

I am looking to create my own checkout button in checkout.liquid, we currently have a form checkout process but are running into and issue with getting our submit button to complete an order. We do not want to use the shopify standard checkout since this is a specialized store and everything is $0. Shipping and billing is done outside of shopify.
Here is our current layout for our form.
#textHead {
font-weight: bold;
padding-bottom: 8px;
padding-left: 5px;
padding-top: 10px;
}
#configHead{
padding-bottom: 8px;
padding-left: 5px;
font-weight: bold;
}
.textarea {
background: white;
border-radius: 8px;
padding-left: 5px;
padding-top: -10px;
border: solid 1px lightgray;
transition: all 0.3s ease 0s;
max-width: 100%;
}
.textarea:hover {
box-shadow: 2px 6px 25px 2px rgba(10,10,120,0.15);
transform: translateZ(-15px);
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
padding-bottom: 25px;
padding-top: 10px;
color: black;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: #0F4B97;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 10px;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
.check {
bottom: 0;
display: flex;
left: calc(50% + 40px);
margin-bottom: 10px;
}
.containerOuter {
background: white;
border-radius: 8px;
}
.container {
position: relative;
margin: 20px;
overflow: visible;
width: 100px;
}
.hidden {
display: none;
}
.entry {
height: 25px;
position: absolute;
width: 160px;
}
.entry:nth-child(2) {
left: 8px;
top: 8px;
}
.entry:nth-child(4) {
left: 8px;
top: 58px;
}
.entry:nth-child(6) {
left: 8px;
top: 108px;
}
.circle {
border: 2px solid #545556;
border-radius: 50%;
cursor: pointer;
height: 20px;
position: absolute;
transition: border-color 300ms;
width: 20px;
}
.entry-label {
cursor: pointer;
margin-top: -3px;
padding-left: 40px;
user-select: none;
-moz-user-select: none;
}
.overlay {
background: #fff;
mask: url(#holes);
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACMCAYAAAAOc+uVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAItSURBVHic7ZnNjhJBFIVPA0txr0Iyw+tIdOXWaDRufZWZeYbZuMKOUV9Gg+HHGN/BHBcNcSBT1KVOEVycb0mq635UVd9U5zQkif+Y3rkFclhQxYIqFlQZiM8vALQAPgP4AWC1+X0E4ALAFMBzAOPiCixjRfIdyX5g/h7JFyTnJYVKBGckHxQsxJBke2rBK5LF55bdal6fSnCmyO1JhlcyKrhkwbYekBySXNcUfF1L7o7k20jhhsxetxYAJk3T/Kks2EfXmkaHxkXO1MfacgCwmbPNjYsIftV1knzJDYgIfqsgkuJ7bkBE8FcFkRTr3IBzXxay9SOCjyuIFM8dEZxUECmeOyL4tIJIimluQKRRLwFcnqBRDwDMUaFRjwG8quC0zxtk5ACEL6wrksNaZiQfkvwZKRxtM08AfGDgBh2Q6wG4BfAo+sAxXB/xp+6VI3lzTMGSK3/Lgu1mt62fji1W+tH0m+R7dm9iZNVeMnjm9om0mUOs8O+zc47dz84Juh76DJG3NYEqeHLOfVnIYkEVC6pYUMWCKhZUsaCKBVUsqGJBFQuqWFDFgipO3OnEfRcn7qWCTtxTOHFP4cS9Ek7cVZy4qzhxL4ZO3AXoxF2QoxP3DifuW5y4q1hQxYIqFlSxoIoFVSyoYkEVC6pYUMWCKhZUsaCKE3c6cd/FiXupoBP3FE7cUzhxr4QTdxUn7ipO3IuhE3cBOnEX5OjEvcOJ+xYn7ioWVLGgigVV/gKEL4RSyM8Z8wAAAABJRU5ErkJggg==);
height: 80px;
pointer-events: none;
transition: background 300ms;
width: 40px;
}
.highlight {
background: #4D98EF;
border-radius: 50%;
height: 12px;
left: 14px;
pointer-events: none;
position: absolute;
top: 14px;
transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.2);
transform: translateY(-50px);
width: 12px;
}
.hidden:nth-child(1):checked ~ .highlight {
transform: translateY(0);
}
.hidden:nth-child(3):checked ~ .highlight {
transform: translateY(50px);
}
.hidden:nth-child(5):checked ~ .highlight {
transform: translateY(100px);
}
.hidden:nth-child(1):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(3):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(5):checked + .entry .circle {
border-color: #4D98EF;
}
.check:checked ~ .containerOuter .overlay {
background: #ecf0f4;
}
</style>
<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>
<form action="ecom#epcusa.com" method="get">
<div class="section1">
<div class="strike">
<span>LAB SERVICES</span>
</div>
<div id="textHead">Would you like to request lab services from our technology center?</div>
<div class="containerOuter">
<div class="container">
<input type="radio" class="hidden" id="input1" name="inputs">
<label class="entry" for="input1"><div class="circle"></div><div class="entry-label">No</div></label>
<input type="radio" class="hidden" id="input2" name="inputs" checked="checked">
<label class="entry" for="input2"><div class="circle"></div><div class="entry-label">Yes</div></label>
<div class="highlight"></div>
<div class="overlay"></div>
</div>
</div>
<svg width="0" height="0" viewBox="0 0 40 140">
<defs>
<mask id="holes">
<rect x="0" y="0" width="100" height="140" fill="white" />
<circle r="12" cx="20" cy="20" fill="black"/>
<circle r="12" cx="20" cy="70" fill="black"/>
<circle r="12" cx="20" cy="120" fill="black"/>
</mask>
</defs>
</svg>
<div id="box" class="config">
<p id="textHead">Lab Configuration Instructions</p>
<textarea class="textarea" name="config-instructions" cols="75" rows="5">Combine with order #[Y/N]:
Engineer Email:
Requester Email:
PM Email:
</textarea>
</div>
</div>
<div class="strike">
<span>SHIPPING</span>
</div>
<div>
<p id="textHead">Ship To MAC:Address</p>
<p>
<input type="text" class="textarea" name="shipping-search" placeholder="MAC:Address" />
</p>
<p id="textHead">Custom Address</p>
<p>
<textarea class="textarea" name="shipping-search" placeholder="Custom Adress" cols="75" rows="5"></textarea>
</p>
<p>
<p id="textHead">Shipping Instructions</p>
<!-- <p id="textSub">Provide any specific shipping requirements for your order.</p> -->
<p>
<textarea class="textarea" name="ship-instructions" cols="75" rows="4" placeholder="Example: Forklift driver, proof of insurance required, etc"></textarea>
</p>
<p>
<p id="textHead">Shipping Method</p>
</p>
<p>
<label for="ship-method" class="textarea">
<select name="shipping-method" id="ship-method" width="50px">
<option value="UPS Ground">UPS Ground</option>
<option value="Fedex Ground">Fedex Ground</option>
</select>
</label>
</p>
<p id="textHead">Requested Arrival Date</p>
<p>
<!-- <sub>Your order's request date may be based on pre-defined working days and service level agreements related to this store</sub> -->
</p>
<input type="date" class="textarea" name="arrival" />
<p>
<b>Ship To Contact</b> <!-- (Add API call for contact lookup here if can't integrate it into ship to address - Contact Email / Phone #) -->
<br /> <sub>Main point of contact for the delivery of your order.</sub>
</p>
<p>
<input type="search" class="textarea" name="shipping-contact" placeholder="Search Contact" />
</p>
</div>
<div class="strike">
<span>BILLING</span>
</div>
<label for="billing">
<b>PO Number</b>
<br />
</label>
<sub>Point of reference for your order.</sub>
<p>
<textarea class="textarea" name="po-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>ORDER INFORMATION</span>
</div>
<label for="order-info">
<b>Ordered By Contact</b>
<br />
</label>
<sub>This contact will receive a confirmation email and order status notifications depending on store access and preferences.</sub>
<p>
{{ customer.name }} | {{ customer.email }}
</p>
<label for="additional-email">
<b>Additional Confirmation Email Recipients</b>
<br />
</label>
<sub>Add additional email recipients here</sub>
<p>
<textarea class="textarea" name="add-email" cols="75" rows="1" placeholder="Seperate with a "," for multiple addresses"></textarea>
</p>
<p>
<label for="reference-number">
<b>Customer Reference Number</b>
<br />
<sub>Add any additional order identiying reference numbers</sub>
</label>
</p>
<p>
<textarea class="textarea" name="reference-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>COMPLETE CHECKOUT</span>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").click(function(){
$("#box").slideUp("slow");
});
$("#input2").click(function(){
$("#box").slideDown("slow");
});
});
</script>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var x = $("form").serializeArray();
$.each(x, function(i, field) {
$("#output").append(field.name + ":"
+ field.value + " ");
});
});
});
</script>
</head>
<body>
<div>
<button>Submit</button>
</div>
<div id="output"></div>
</body>
</html>```

Related

how to display information from realtime database w/o user being logged in?

i am trying to display the prices for customers when they checkout. These numerical values are being stored in the realtime database when admin users have set up their profile and set their product prices. How can I do this without the admin user having to log in? Im basically trying display each admin user's profile information depending on which card gets selected by the customer from the main page. This is how my database structure is set up and this is how my JS function looks:
{
"studiopick": {
"studio": {
"users": {
"Gcsh31DCGAS2u2XXLuh8AbwBeap1": {
"email": "Test#gmail.com",
"firstName": "Test",
"lastName": "one",
"phoneNumber": "2223334567",
"prices": {
"roomA": {
"serviceOne": {
"numberInput": "300",
"serviceType": "mix n master"
}
}
},
"studioName": "Studio One",
"uid": "Gcsh31DCGAS2u2XXLuh8AbwBeap1"
}
}
}
}
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize variables
const database = firebase.database();
function readServiceData() {
database.ref('/studiopick/studio/users/' + user.uid + '/prices/roomA/serviceOne').on("value", snapshot => {
document.getElementById("session-price").innerHTML = snapshot.val().numberInput;
document.getElementById("serviceOne").innerHTML = snapshot.val().serviceType;
}).catch(e => { console.log(e) })
}
body{
background-color: #E5E5E5 !important;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.home{
color: #686868 !important;
font-size: 20px;
padding-right: 15px;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
padding-right: 15px;
}
.nav-item2{
background-color: #9370DB !important;
border-radius: 15px !important;
width: 140px !important;
text-align: center !important;
font-size: 20px;
color: #ffffff;
}
.carousel-bg{
position: relative;
right: -170px;
width: 75%;
height: 50%;
background-color: #ffffff;
border: 5px;
border-radius: 15px !important;
padding: 30px;
margin: 0;
margin-top: 70px;
text-align: center;
}
/*---Star Rating---*/
.rating-box {
width: 175px;
height: 35px;
border-radius: 15px !important;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
.display-text{
margin-top: -105px;
}
/*---Like Button---*/
.btns{
position: relative;
top: -65px;
right: -400px;
}
/*---Session Options---*/
.rooms{
margin: auto;
width: 1228px;
height: 263px;
margin-bottom: -95px;
border-radius: 15px !important;
background-color: #ffffff;
border: 1px;
}
.d-block{
border-radius: 15px !important;
}
/*---Service Selection---*/
.sessions{
position: relative;
top: 50px;
right: -170px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 0;
background-color: #ffffff;
border-radius: 15px !important;
padding: 0px;
width: 40%;
height: 450px;
}
.new-session{
position: relative;
top: 15px;
right: 0px;
width: 460px;
border-radius: 15px !important;
height: 100px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
.new-session2{
position: relative;
top: 15px;
right: 0px;
width: 460px;
border-radius: 15px !important;
height: 100px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
.new-session3{
position: relative;
top: 15px;
right: 0px;
width: 460px;
border-radius: 15px !important;
height: 100px;
margin: auto;
margin-bottom: 10px;
background-color: #E5E5E5;
border: 1px;
box-sizing: border-box;
}
.room-name{
position: relative;
top: 0px;
right: -25px;
font-size: 20px;
}
.new-session2 .room-name{
position: relative;
top: -25px;
right: -25px;
font-size: 20px;
}
.serviceOne{
position: relative;
top: -35px;
right: -25px;
}
.serviceTwo{
position: relative;
top: -150px;
right: -25px;
}
.new-session2 .serviceOne{
position: relative;
top: -40px;
right: -25px;
}
.new-session2 .serviceTwo{
position: relative;
top: -150px;
right: -25px;
}
.new-session3 .serviceOne{
position: relative;
top: -15px;
right: -25px;
}
.new-session3 .serviceTwo{
position: relative;
top: -105px;
right: -25px;
}
#select1{
margin: 0;
padding: 0;
position: relative;
top: -7px;
right: -5px;
}
#select2{
margin: 0;
padding: 0;
position: relative;
top: -120px;
right: -5px;
z-index: 3;
}
.new-session2 #select1{
margin: 0;
padding: 0;
position: relative;
top: 35px;
right: -5px;
z-index: 3;
}
.new-session2 #select2{
margin: 0;
padding: 0;
position: relative;
top: -120px;
right: -5px;
z-index: 3;
}
.new-session .session-price{
position: relative;
top: -75px;
right: -385px;
}
.new-session .session-price2{
position: relative;
top: -190px;
right: -385px;
}
.new-session2 .session-price{
position: relative;
top: -75px;
right: -385px;
}
.new-session2 .session-price2{
position: relative;
top: -190px;
right: -385px;
}
.new-session3 .session-price{
position: relative;
top: -55px;
right: -385px;
}
.new-session3 .session-price2{
position: relative;
top: -145px;
right: -385px;
}
.deal-alert{
position: relative;
top: -145px;
right: -320px;
color: #f60000;
}
.new-session2 .deal-alert{
position: relative;
top: -145px;
right: -320px;
color: #f60000;
}
.new-session3 .deal-alert{
position: relative;
top: -125px;
right: -320px;
color: #f60000;
}
.select-service{
position: relative;
top: 29px;
right: -190px;
background-color: #9370DB !important;
border-radius: 10px !important;
border-color: #000000;
text-align: center !important;
}
/*---Service Selection---*/
/*---Comment Form---*/
/*---Comment Form---*/
/*---Footer---*/
.page-footer{
background-color: #9370DB;
}
<!doctype html>
<html>
<head>
<!---Required meta tags=-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/studiostyle.css">
<!---Like Button JavaScript--->
<script src="https://kit.fontawesome.com/f6dcf461c1.js" crossorigin="anonymous"></script>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>StudioPick</title>s
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Out</a>
</li>
<li class="nav-item2">
<span class="position-absolute top-3 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
<a class="nav-link" href="#">Dashboard</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<!---Carousel--->
<div class="container">
<div class="carousel-bg">
<h1 style="text-align: left;"><strong>CC Studios</h1>
<div class="btns">
<Button style="font-size: 55px;" onclick="Toggle1()" id="btnh1" class="btn"><i class="fas fa-heart"></i></Button>
</div>
<script>
//Like Button
var btnvar1 = document.getElementById('btnh1');
function Toggle1(){
if (btnvar1.style.color =="red") {
btnvar1.style.color = "grey"
}
else{
btnvar1.style.color = "red"
}
}
</script>
<p class="display-text" style="text-align: left"><strong>Bethesda, MD</p>
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%" y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5" fill="currentColor" points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085"></polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star"/>
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.squarespace-cdn.com/content/v1/5cbf6245f4e5311aabbdca11/1584497803228-81638MGINNONP2ZYUVNS/011720NYRE-6249%2Bcopy.jpg?format=1500w" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.musictech.net/wp-content/uploads/2019/07/soys-splice-studio-03#1400x1050.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.squarespace-cdn.com/content/v1/5cbf6245f4e5311aabbdca11/1584499675049-H4UVB0269CBXE63K43MR/011720NYRE-4328.jpg?format=1500w" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!---Carousel--->
<h1 style="text-align: center; margin-top: 30px; font-size: 35px;"><strong>Available Services</h1>
<!---Session Options--->
<div class="container">
<!---Upcoming Sessions--->
<div class="sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Select A Service:</strong></h5>
<div class="new-session">
<p class="room-name">Room A</p>
<!---Service One--->
<!---Select Button--->
<input class="form-check-input" type="radio" name="serviceSelect" id="select1">
<!---Select Button--->
<p class="serviceOne text-muted" id="serviceOne">Session w/ No Engineer</p>
<p class="session-price text-muted" id="session-price">$45/Hr</p>
<p class="deal-alert">Two Spots Left!</p>
<!---Service One--->
<!---Service Two--->
<!---Select Button--->
<input class="form-check-input" type="radio" name="serviceSelect" id="select2">
<!---Select Button--->
<p class="serviceTwo text-muted">Session w/ Engineer</p>
<p class="session-price2 text-muted">$45/Hr</p>
<!---Service Two--->
</div>
<div class="new-session2">
<!---Select Button--->
<input class="form-check-input" type="radio" name="serviceSelect" id="select1">
<!---Select Button--->
<p class="room-name">Room B</p>
<!---Service One--->
<p class="serviceOne text-muted">Session w/ No Engineer</p>
<p class="session-price text-muted">$45/Hr</p>
<p class="deal-alert">Two Spots Left!</p>
<!---Service One--->
<!---Select Button--->
<input class="form-check-input" type="radio" name="serviceSelect" id="select2">
<!---Select Button--->
<!---Service Two--->
<p class="serviceTwo text-muted">Session w/ Engineer</p>
<p class="session-price2 text-muted">$45/Hr</p>
<!---Service Two--->
</div>
<div class="new-session3">
<p class="room-name">Mixing and Mastering</p>
<!---Service One--->
<p class="serviceOne text-muted">Mix</p>
<p class="session-price text-muted">$105</p>
<p class="deal-alert">Two Spots Left!</p>
<!---Service One--->
<!---Service Two--->
<p class="serviceTwo text-muted">Mix and Mastering</p>
<p class="session-price2 text-muted">$250</p>
<!---Service Two--->
</div>
<button class="select-service">Select Room</button>
</div>
</div>
<!---Upcoming Sessions--->
</div>
<!---Sesson Options--->
<!---Comment Form--->
<!---Comment Form--->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<!---Javascript--->
<script src="Javascript/studiopage.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

HTML Multi step form doesn't work on Mobile

I have a multistep form but the multi-steps doesn't work on mobile it shows all the steps in one go even the success message.
Please help me if possible
The HTML-CSS and javascript code I got it from here:
https://codepen.io/TyStelmach/pen/yNxMeJ
---
The HTML Code
```
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
type="text/javascript">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
</head>
<div class="info">
<h1>Please fill in the form </h1>
<span>
Made with
<i class="fa fa-beer"></i>
by
AAA Web Agency
<div class="spoilers">
Need “Permission to Contact” language that is TCPA compliant </div>
</span>
</div>
<!-- Modal -info -->
<div class="container">
<div id="modal-3" class="modal" data-modal-effect="slide-top">
<div class="modal-content">
<h2 class="fs-title">Score Index</h2>
<h3 class="fs-subtitle">Getting the most out of your data</h3>
<p>Your data has been successfully submited</p>
<input type="button" name="next" class="next action-button modal-close" value="Got it!">
</div>
</div>
</div>
<form name='form1' class="steps" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<ul id="progressbar">
<li class="active">Step 1</li>
<li>Step2</li>
</ul>
<!-- USER INFORMATION FIELD SET -->
<fieldset>
<h2 class="fs-title">Basic Information</h2>
<h3 class="fs-subtitle">We just need some basic information to begin</h3>
<!-- Begin What's Your User ID Field -->
<div class="hs_firstname field hs-form-field">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your 8 digits User ID *</label>
<input id="id" name="user_id" required="required" type="number" onkeyup="GetDetail(this.value)" value="" placeholder="" data-rule-required="true" data-msg-required="Please insert your 8 digits User ID" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your User ID Field -->
<!-- Begin What's Your First Name Field -->
<div class="row">
<div class="col-md-6">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
<input id="first_name" name="first_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your first name" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your First Name Field -->
<!-- Begin What's Your Last Name Field -->
<div class="col-md-6">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">What's your First Name? *</label>
<input id="last_name" name="last_name" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your last name" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End What's Your Last Name Field -->
<!-- Begin Address Field -->
<div class="hs_firstname field hs-form-field">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your Address *</label>
<input id="address" name="address" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your address" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Adress Field -->
<!-- Begin City Field -->
<div class="row">
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">City *</label>
<input id="city" name="city" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your City" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End City Field -->
<!-- Begin State Field -->
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">State *</label>
<input id="state" name="state" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your State" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End State Field -->
<!-- Begin Zip Field -->
<div class="col-md-4">
<label for="firstname-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Zip Code *</label>
<input id="zip" name="zip" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Please include your Zip Code" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Zip Field -->
<!-- Begin What's Your Email Field -->
<div class="hs_email field hs-form-field">
<label for="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Your E-mail Address? *</label>
<input id="email-99a6d115-5e68-4355-a7d0-529207feb0b3_2983" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid email address." >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End What's Your Email Field -->
<!-- Begin Total Number of Constituents in Your Database Field -->
<div class="row">
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Cell Phone No. *</label>
<input id="cell" class="form-text hs-input" name="cell" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid Cell Phone Number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Cell Phone Field -->
<!-- Begin Total Number of Constituents in Your Database Field -->
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Office Phone No. </label>
<input id="office_phone" class="form-text hs-input" name="office_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a Office Phone Number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Cell Phone Field -->
<!-- Begin Office Phone Field -->
<div class="col-md-4">
<label for="edit-submitted-constituent-base-total-constituents total_number_of_constituents_in_your_database-99a6d115-5e68-4355-a7d0-529207feb0b3_6344">Home Phone No.</label>
<input id="home_phone" class="form-text hs-input" name="home_phone" required="required" size="60" maxlength="128" type="phone" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid number" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Office Phone Field -->
<input type="button" data-page="1" name="next" class="next action-button" value="Next" />
</fieldset>
<!-- RETENTION FIELD SET -->
<fieldset>
<h2 class="fs-title">Retention of your donors</h2>
<h3 class="fs-subtitle">How long can you keep your donors and their donations?</h3>
<!-- Begin Monthly Rent Field -->
<div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Monthly Rent</label>
<input id="monthly_rent" class="form-text hs-input" name="monthly_rent" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Monthly Rent Field-->
<!-- Begin Length of time at residence? Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence? __ yrs.</label>
<input id="residence_yrs" class="form-text hs-input" name="residence_yrs" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Length of time Field-->
<!-- Begin Length of time at residence? Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Length of time at residence?___ mos.</label>
<input id="residence_mos" class="form-text hs-input" name="residence_mos" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Length of time mons Field-->
<!-- Begin Age Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Age</label>
<input id="age" class="form-text hs-input" name="age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Age">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Age Field-->
<!-- Begin Gender Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Gender</label>
<input id="gender" class="form-text hs-input" name="gender" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Monthly Rent">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Gender Field-->
<!-- Begin Length of time at residence? Field -->
<div class="row">
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Name</label>
<input id="spouse_name" class="form-text hs-input" name="spouse_name" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Name">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Spouse’s Name Field-->
<!-- Begin Spouse’s Age Field -->
<div class="col-md-6" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Spouse’s Age</label>
<input id="spouse_age" class="form-text hs-input" name="spouse_age" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid Spouse’s Age">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</div>
<!-- End Spouse’s Age Field-->
<!-- Begin Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
<div class="form-item webform-component webform-component-textfield" id="webform-component-retention--percent-change field hs-form-field">
<label for="edit-submitted-retention-percent-change">Retention Rate</label>
<select id="select1" class="form-text hs-input" name="select1" value="" placeholder="0">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Have you contributed to a 401(k)/403(b)/IRA retirement program in the past year? select -->
<!-- Begin Best time/day to contact Field -->
<div class="form-item webform-component webform-component-textfield hs_number_of_donors_in_year_1 field hs-form-field" id="webform-component-retention--amount-1">
<label for=" edit-submitted-retention-amount-1 number_of_donors_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_2983">Best time/day to contact:</label>
<input id="best_time" class="form-text hs-input" name="best_time" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="false" data-msg-required="Please enter a valid time">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<!-- End Best time/day to contact Field-->
<input type="button" data-page="5" name="previous" class="previous action-button" value="Previous" />
<input id="submit" class="hs-button primary large action-button next" type="submit" value="Submit">
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>
</fieldset>
<fieldset>
<h2 class="fs-title">It's on the way!</h2>
<h3 class="fs-subtitle">Thank you for trying out our marketing grader, please go check your email for your fundraising report card and some helpful tips to improve it!</h3>
<div class="explanation btn btn-small modal-trigger" data-modal-id="modal-3">What Is This?</div>
</fieldset>
```

You have a media query in your CSS that is responsible for exactly that behavior.
#media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
#progressbar{
display:none;
}
/*move error logs */
.error1 {
position: relative;
left: 0 !important;
margin-top: 24px;
top: -11px;
}
.error1:before {
width: 0;
height: 0;
left: 14px;
top: -14px;
content: '';
position: absolute;
border-left: 6px solid transparent;
border-bottom: 8px solid #e62163;
border-right: 6px solid transparent;
}
/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
display: block;
}
.steps fieldset{
position:relative;
width: 100%;
margin:0 auto;
margin-top: 45px;
}
.steps .next, .steps .previous{
display:none;
}
.steps .explanation{
display:none;
}
.steps .submit {
float: right;
margin: 28px auto 10px;
width: 100% !important;
}
}

And the CSS code
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
background: #e9e9e9;
}
body {
font-family: montserrat, arial, verdana;
width: 100%;
overflow-x: hidden;
}
/*form styles*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
.steps fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 17px 41px -21px rgb(0, 0, 0);
padding: 20px 30px;
border-top: 9px solid #303030;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
.steps fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
.steps label{
color: #333333;
text-align: left !important;
font-size: 15px;
font-weight: 200;
padding-bottom: 7px;
padding-top: 12px;
display: inline-block;
}
.steps input, .steps textarea {
outline: none;
display: block;
width: 100%;
margin: 0 0 20px;
padding: 10px 15px;
border: 1px solid #d9d9d9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #837E7E;
font-family: "Roboto";
-webkti-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
font-wieght: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.steps input:focus, .steps textarea:focus{
color: #333333;
border: 1px solid #303030;
}
.error1{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
position: absolute;
left: 105px;
margin-top: -58px;
padding: 0 10px;
height: 39px;
display: block;
color: #ffffff;
background: #e62163;
border: 0;
font: 14px Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
line-height: 39px;
white-space: nowrap;
}
.error1:before{
width: 0;
height: 0;
left: -8px;
top: 14px;
content: '';
position: absolute;
border-top: 6px solid transparent;
border-right: 8px solid #e62163;
border-bottom: 6px solid transparent;
}
.error-log{
margin: 5px 5px 5px 0;
font-size: 19px;
position: relative;
bottom: -2px;
}
.question-log {
margin: 5px 1px 5px 0;
font-size: 15px;
position: relative;
bottom: -2px;
}
/*buttons*/
.steps .action-button, .action-button {
width: 100px !important;
background: #303030;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px auto;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
display: block;
}
.steps .next, .steps .submit{
float: right;
}
.steps .previous{
float:left;
}
.steps .action-button:hover, .steps .action-button:focus, .action-button:hover, .action-button:focus {
background:#444343;;
}
.steps .explanation{
display: block;
clear: both;
width: 540px;
background: #f2f2f2;
position: relative;
margin-left: -30px;
padding: 22px 0px;
margin-bottom: -10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
top: 10px;
text-align: center;
color: #333333;
font-size: 12px;
font-weight: 200;
cursor:pointer;
}
/*headings*/
.fs-title {
text-transform: uppercase;
margin: 0 0 5px;
line-height: 1;
color: #303030;
font-size: 18px;
font-weight: 400;
text-align:center;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #837E7E;
margin-bottom: 20px;
text-align: center;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
width:100%;
text-align: center;
}
#progressbar li {
list-style-type: none;
color: rgb(51, 51, 51);
text-transform: uppercase;
font-size: 9px;
width: 50%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #303030;
color: white;
}
/* my modal */
.modal p{
font-size: 15px;
font-weight: 100;
font-family: sans-serif;
color: #3C3B3B;
line-height: 21px;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal.modal-show {
visibility: visible;
}
.lt-ie9 .modal {
top: 0;
margin-left: -315px;
}
.modal-content {
background: #ffffff;
position: relative;
margin: 0 auto;
padding: 40px;
border-radius: 3px;
}
.modal-overlay {
background: #000000;
position: fixed;
visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition-property: visibility, opacity;
-o-transition-property: visibility, opacity;
-webkit-transition-property: visibility, opacity;
transition-property: visibility, opacity;
-moz-transition-delay: 0.5s, 0.1s;
-o-transition-delay: 0.5s, 0.1s;
-webkit-transition-delay: 0.5s, 0.1s;
transition-delay: 0.5s, 0.1s;
-moz-transition-duration: 0, 0.5s;
-o-transition-duration: 0, 0.5s;
-webkit-transition-duration: 0, 0.5s;
transition-duration: 0, 0.5s;
}
.modal-show .modal-overlay {
visibility: visible;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
/*slide*/
.modal[data-modal-effect|=slide] .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-moz-transition: all 0.5s 0;
-o-transition: all 0.5s 0;
-webkit-transition: all 0.5s 0;
transition: all 0.5s 0;
}
.modal[data-modal-effect|=slide].modal-show .modal-content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
-webkit-transition: all 0.5s;
-webkit-transition-delay: 0.1s;
transition: all 0.5s 0.1s;
}
.modal[data-modal-effect=slide-top] .modal-content {
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.modal[data-modal-effect=slide-top].modal-show .modal-content {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
/* RESPONSIVE */
/* moves error logs in tablet/smaller screens */
#media (max-width:1000px){
/*brings inputs down in size */
.steps input, .steps textarea {
outline: none;
display: block;
width: 100% !important;
}
/*brings errors in */
.error1 {
left: 345px;
margin-top: -58px;
}
}
#media (max-width:675px){
/*mobile phone: uncollapse all fields: remove progress bar*/
.steps {
width: 100%;
margin: 50px auto;
position: relative;
}
#progressbar{
display:none;
}
/*move error logs */
.error1 {
position: relative;
left: 0 !important;
margin-top: 24px;
top: -11px;
}
.error1:before {
width: 0;
height: 0;
left: 14px;
top: -14px;
content: '';
position: absolute;
border-left: 6px solid transparent;
border-bottom: 8px solid #e62163;
border-right: 6px solid transparent;
}
/*show hidden fieldsets */
.steps fieldset:not(:first-of-type) {
display: block;
}
.steps fieldset{
position:relative;
width: 100%;
margin:0 auto;
margin-top: 45px;
}
.steps .next, .steps .previous{
display:none;
}
.steps .explanation{
display:none;
}
.steps .submit {
float: right;
margin: 28px auto 10px;
width: 100% !important;
}
}
/* Info */
.info {
width: 300px;
margin: 35px auto;
text-align: center;
font-family: 'roboto', sans-serif;
}
.info h1 {
margin: 0;
padding: 0;
font-size: 28px;
font-weight: 400;
color: #333333;
padding-bottom: 5px;
}
.info span {
color:#666666;
font-size: 13px;
margin-top:20px;
}
.info span a {
color: #666666;
text-decoration: none;
}
.info span .fa {
color: rgb(226, 168, 16);
font-size: 19px;
position: relative;
left: -2px;
}
.info span .spoilers {
color: #999999;
margin-top: 5px;
font-size: 10px;
}

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

How to use radio buttons to make a div visible with javascript

I'm trying to make this accordion be a selector for some items. So a quick break down so if a button is pressed (which is really a radio button) then the panel below it makes one of the three choices visible. They each have a class called invisible which makes them hidden and I want to make which ever one equals the id of the selected radio button visible.
Picture Example
For some reason however they are not invisible and only one is showing is it something to do with the accordion JavaScript I have?
HTML
<div id="pricing_holder">
<button class="accordion">
<h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
<label class="icon-select">
<input type="radio" name="type" id="laptop_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-laptop-4.png&r=0&g=0&b=0" alt="laptop"> </label>
<label class="icon-select">
<input type="radio" name="type" id="tablet_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-tablet-1.png&r=0&g=0&b=0" alt="tablet"> </label>
<label class="icon-select">
<input type="radio" name="type" id="phone_button" /> <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-smartphone-4.png" alt="phone"> </label>
</div>
<button class="accordion">
<h2 class="text-center">Model</h2></button>
<div class="panel invisible" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="tablet_panel">
<div id="col1">
<label class="control control--radio">TABLET1
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">TABLET2
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">TABLET3
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
CSS
#pricing_holder {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 285px;
height: 65px;
}
#col2 {
float: none;
height: 65px;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 65px;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 12px;
width: 75%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid grey;
border-right: 1px solid grey;
border-top: 1px solid grey;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 71%;
display: block;
transition: max-height 0.2s ease-out;
border: 1px solid grey;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #ccc;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var typeselect = $("input[name='type']:checked").attr('id');
$("laptop_button").click(function(){
$("laptop_panel").toggleClass("invisible");
});
$("tablet_button").click(function(){
$("tablet_panel").toggleClass("invisible");
});
$("phone_button").click(function(){
$("phone_panel").toggleClass("invisible");
});
JSFIDDLE: https://jsfiddle.net/4crj2ash/

CSS Animation Creation

I am new to CSS animations and have very little knowledge with animations specifically. My intention is to have the grey box come down from the top line above the login / register section. At the moment I have only got it fading in. If anybody can help that would be great.
Please run the code in your own browser to see how it's supposed to run.
P.S. The animation runs when the button is clicked.
If anybody can help that would be great.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}
body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}
<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
Why<br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>

Here is the quick solution,
make #cover_for_register = z-index highest from others and change your animation to
#-webkit-keyframes animateone {
from { top:-52%;}
to {top: 5%;}//desired margin from top to cover your login page.
}
it will work fine.

Only thing you have to change is as
#-webkit-keyframes animateone {
from { height:0%;}
to {height: 100%;}
}
AND add below point in CSS...
add top:0; position:absolute; to #cover_for_register
add position:relative; #login_register_container
Look at this : https://jsfiddle.net/dkrvl2011/se93orog/10/show/

We Keep Coding

JavaScript is the programming language of the Web.

Custom checkout button in checkout.liquid - javascript

Related

how to display information from realtime database w/o user being logged in?

HTML Multi step form doesn't work on Mobile

Why is my hide() and show() not working even without error in JQuery? [duplicate]

How to use radio buttons to make a div visible with javascript

CSS Animation Creation

Categories

Resources