Login

Both `div`s have the same class but I want to make the lower `div` be hidden and after clicking on first `div`'s button the second `div` becomes visible

techniques:

* on click add css property
* or remove hidden property
* or any other option if possible





function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
}



.ab {
width: 200px;
height: 200px;
background: black;
}

#bb {
visibility: hidden;
}



<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn">Submit</button></div>
<div class="ab" id="bb" onclick="myfunction()">
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>

Try this by adding a click event





<html>

<body>
<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" />
<br/>
<input type="password" placeholder="password" />
<br/>
<button type="submit" value="submit" id="btn" onclick="showLowerDiv()">Submit</button>
</div>
<div class="ab" id="bb" onclick="myfunction()">
<p><font color="white">you have succesfully registered</font></p>
<button type="submit">Return</button>
</div>
<style>
.ab {
width: 200px;
height: 200px;
background: black;
}

#bb {
visibility: hidden;
}
</style>
<script>
function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
}

function showLowerDiv() {
document.getElementById('bb').style.visibility = 'visible';
}
</script>
</body>

</html>

Your `onclick="myfunction()"` should be on the first button, shouldn't it? And there are some minor mistakes/typos in the code, which I fixed in my snippet





function myfunction() {
document.getElementById('bb').style.cssText = 'visibility:visible';
};



.ab {
width: 200px;
height: 200px;
background: black;
}

#bb {
visibility: hidden;
}



<div class="ab" >
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>

If I understood correctly, you're looking to show the second div ('bb') after you click the submit button, then clicking the return button in the second div will hide it and return to the first one.

In that case, the HTML:

<div class="ab" id="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="button" value="submit" id="btn" onclick="submitForm();">Submit</button>
</div>

<div class="ab" id="bb">
<p><font color="white">you have succesfully registered</font></p>
<button type="button" onclick="returnToForm();">Return</button>
</div>

The CSS would be:

<style>
.ab {
width:200px;
height:200px;
background:black;
}
#bb{
display: none;
}
<style>
*Note: you need to close the `<style>` tag before opening a script tag.*

And finally the JS:

<script>
function submitForm()
{
$('#ab').hide();
$('#bb').show();
}
function returnToForm()
{
$('#ab').show();
$('#bb').hide();
}
</script>

To make the 2nd `div` appear when the Submit button is clicked, move the `onclick="myfunction()"` to the Submit button.





function myfunction() {
console.log('show')
document.getElementById('bb').style.visibility = 'visible';
}



.ab {
width: 200px;
height: 200px;
background: black;
}

#bb {
visibility: hidden;
}



<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb">
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>

If you want to display the second div on button click. Use the below code.

I have moved your `myfunction()` on the click event of first submit button.





function myfunction(){
document.getElementById('bb').style.cssText ='visibility:visible';
}



.ab{
width:200px;
height:200px;
background:black;
}
#bb{
visibility:hidden;
}



<div class="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button>
</div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit" >Return</button></div>

See if this what u need ..





function myfunction() {
document.getElementById("bb").style.display = "block";
}



.ab {
width: 200px;
height: 200px;
background: black;
}

#bb {
display:none;
}



<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email" /><br/>
<input type="password" placeholder="password" /><br/>
<button type="submit" value="submit" id="btn" onclick="myfunction()">Submit</button></div>
<div class="ab" id="bb" >
<p>
<font color="white">you have succesfully registered</font>
</p>
<button type="submit">Return</button>
</div>

Try this code...

<html>
<body>
<script src="test.js"></script>
<div class="ab">
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn" onclick="myFunction()">Submit</button></div>
<div class="ab" id="bb" >
<p><font color="white">you have succesfully registered</font></p>
<button type="submit" >Return</button></div>
<style>
.ab{
height:200px;
background:black;
}
#bb{
visibility:hidden;
}
</style>
<script>
function myFunction() {
document.getElementById('bb').style.cssText ='visibility:visible';
console.log("dfvgds");
}</script>

</body>
</html>

In jquery you can do like this:





$(function(){
$('#btn').on('click',function(){
$('#bb').show();
});
});



.ab{
width:200px;
height:200px;
background:black;
}
#bb{
display:none;
}



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="Email" placeholder="Email"/><br/>
<input type="password" placeholder="password"/><br/>
<button type="submit" value="submit" id="btn">Submit</button></div>
<div class="ab" id="bb">
<p><font color="white">you have succesfully registered</font></p>
<button type="submit" >Return</button>
</div>

baroque951

shirlenegsnzcfpiw

silvabmdloevgzl

extractiform41106

elvish539124

rosetta140

muniptdavzde

thermel448987

archprelate692190