I have made a register/sign in page with a radio button to choose if you want to register or log in,-CodePudding

So I have made it so the div below the radio will change if you change the radio button, but the div only appears when you click and on default, when you open the page it is just empty. You can only see register or log in page if you switch the radio. How can I make it so by default, when the page is opened there is the register page

Codepen link: https://codepen.io/PaprikaLeves/pen/dydGvPW

Code:

HTML:

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elfbar bolt</title>
<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>

</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
 $(document).ready(function(){
  $('input[type="radio"]').click(function(){
      var inputValue = $(this).attr("value");
      var targetBox = $("."   inputValue);
      $(".box").not(targetBox).hide();
      $(targetBox).show();
  });
});
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lilita One&display=swap');
</style>

<div ></div>

<div >

<div >
<p></p>
</div>

<div >

<div >
  
<input type="radio" name="radio2" value="reg" id="tab-1" checked="checked"/>
<label for="tab-1" class= "segmented-control__1">
  <p>Register</p></label>

<input type="radio" name="radio2" value="bel" id="tab-2" />
<label for="tab-2" class= "segmented-control__2">
  <p>Log in</p></label>

<div ></div>
</div>


<div >This will be the REGISTER page</div>

<div >This will be the LOG IN page</div>


</div>

<div >
<p></p>
</div>

</div>
</body>
</html>

CSS:

:root {
--primary-light: #8abdff;
--primary: #6d5dfc;
--primary-dark: #5b0eeb;
--white: #fff;
--greyLight-1: #e4ebf5;
--greyLight-2: #c8d0e7;
--greyLight-3: #bec8e4;
--greyDark: #9baacf;
}


$shadow: .3rem .3rem .6rem var(--greyLight-2), 
-.2rem -.2rem .5rem var(--white);
$inner-shadow: inset .2rem .2rem .5rem var(--greyLight-2), 
inset -.2rem -.2rem .5rem var(--white);

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}  

.segmented-control {
margin: auto;
grid-column: 3 / 4;
grid-row: 1 / 2;
width: 90%;
height: 4rem;
box-shadow: .3rem .3rem .6rem var(--greyLight-2), 
-.2rem -.2rem .5rem var(--white);;
border-radius: 1rem;
display: flex;
align-items: center;
position: relative;
}

#tab-1:checked ~ .segmented-control__color {
transform: translateX(0);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#tab-2:checked ~ .segmented-control__color {
transform: translateX(16.5rem);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.segmented-control__1 {
width: 48%;
height: 3.6rem;
font-size: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: var(--greyDark);
transition: all .5s ease;
}

.segmented-control__2 {
width: 48%;
height: 3.6rem;
font-size: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: var(--greyDark);
transition: all .5s ease;
}

.segmented-control__color {
position: absolute;
height: 3.4rem;
width: 48%;
margin-left: .3rem;
border-radius: .8rem;
box-shadow: inset .2rem .2rem .5rem var(--greyLight-2), 
inset -.2rem -.2rem .5rem var(--white);;
pointer-events: none;
}

input { display: none; }

input:checked   label {
transition: all .5s ease;
color: var(--primary);
}

input:not(:checked)   label {
transition: all .5s ease;
color: var(--greyDark);
}

input:not(:checked):hover   label {
transition: all .5s ease;
color: var(--primary);
}

.segmented-control__1, .segmented-control__2:hover { color: var(--primary); }

.reg {

}

.bel {

}

.box {
display: none;
}

.zold {
color: #00c900;
}

.vszurke {
color: #c4c4c4;
}

.kover {
font-weight: bolder;
}

.ar {
padding-top: -40px;
}

p {
line-height: 0px;
}

.sidebarr {
border-radius: 1rem;
box-shadow:.8rem .8rem 1.4rem var(--greyLight-2), 
-.2rem -.2rem 1.8rem var(--white);
padding: 2rem;
margin-top: 50px;
background: #E4EBF5;
}

.d-flex {
background: #E4EBF5;
}

.col {
background: #E4EBF5;
}

.row {
background: #E4EBF5;
}

body {
background: #E4EBF5;
}

html {
background: #E4EBF5;
}

.card {
background: #E4EBF5;
box-shadow:.8rem .8rem 1.4rem var(--greyLight-2), 
-.2rem -.2rem 1.8rem var(--white);
margin: auto;
border-style: none;
border-radius: 1rem;
transition: 300ms;
}



.card:hover {
background: #ebf0f7;
box-shadow: 1rem 1rem 1.4rem var(--greyLight-3), 
-.2rem -.2rem 1.8rem var(--white);
margin: auto;
border-style: none;
border-radius: 1rem;
}



.card-img-top {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}

.itemektopbot {
margin-top: 50px;
}

.btn {
width: 8rem;
height: 2.5rem;
border-radius: 0.65rem;
box-shadow: .3rem .3rem .6rem #c8d0e7, 
-.2rem -.2rem .5rem #ffffff;;
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s ease;
border: none;
font-family: 'Lilita One', cursive;
}

.btn__primary {
grid-column: 1 / 2;
grid-row: 4 / 5;
background: #6d5dfc;
box-shadow:inset .2rem .2rem 1rem #8abdff, 
inset -.2rem -.2rem 1rem #5b0eeb,
.3rem .3rem .6rem #c8d0e7, 
-.2rem -.2rem .5rem #ffffff;;
color: #E4EBF5;
}

.btn:hover { color: #FFFFFF; }
.btn:active {
box-shadow:inset .2rem .2rem 1rem #5b0eeb, 
inset -.2rem -.2rem 1rem #8abdff;
}

.btn.p {
font-size: 1.6rem;
font-family: 'Lilita One', cursive;
}

.form {
grid-column: 3 / 4;
grid-row: 3 / 4;
}

.form__input {
width: 20.4rem;
height: 4rem;
border: none;
border-radius: 1rem;
font-size: 1.4rem;
padding-left: 1.4rem;
box-shadow: inset .2rem .2rem .5rem var(--greyLight-2), 
inset -.2rem -.2rem .5rem var(--white);;
background: none;
font-family: inherit;
color: var(--greyDark);
}

.form__input::placeholder { color: var(--greyLight-3);}
.form__input:focus { outline: none; box-shadow:  .3rem .3rem .6rem var(--greyLight-2), 
-.2rem -.2rem .5rem var(--white);; }

CodePudding user response：

You can call $('.reg').show() ; on load.

$(document).ready(function(){ 
$('.reg').show() ;
});

CodePudding user response：

You can use

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elfbar bolt</title>
<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>

</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
 $(document).ready(function(){
  $('input[type="radio"]').click(function(){
      var inputValue = $(this).attr("value");
      var targetBox = $("."   inputValue);
      $(".box").not(targetBox).hide();
      $(targetBox).show();
  });
  var inputValue = $('input[type=radio]:checked').attr("value")
  var targetBox = $("."   inputValue);
  $(".box").not(targetBox).hide();
  $(targetBox).show();
});
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lilita One&display=swap');
</style>

<div ></div>

<div >

<div >
<p></p>
</div>

<div >

<div >
  
<input type="radio" name="radio2" value="reg" id="tab-1" checked="checked"/>
<label for="tab-1" class= "segmented-control__1">
  <p>Register</p></label>

<input type="radio" name="radio2" value="bel" id="tab-2" />
<label for="tab-2" class= "segmented-control__2">
  <p>Log in</p></label>

<div ></div>
</div>


<div >This will be the REGISTER page</div>

<div >This will be the LOG IN page</div>


</div>

<div >
<p></p>
</div>

</div>
</body>
</html>