I need to display different form fields depending on whether the credit card radio button or debit card radio button is selected. Currently, when I select a radio button, only the corresponding form fields are visible.
Current Code
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
</div>
The issue is that I want both sets of form fields to be displayed when I press each respective radio button, but currently only one set is showing at a time.
Here is my complete code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form method="post" action="#">
<h4>Payment type:</h4>
<div>
<div>
<input type="radio" name="credit" id="credit" required>
<label>Credit card</label>
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
<div>
<input type="radio" name="debit" id="debit">
<label>Debit card</label>
<div class="fordebit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
</div>
<div>
<input type="submit" value="Pay">
</div>
</form>
</body>
</html>
I am looking for help in adjusting the CSS file so that both sets of form fields can be displayed simultaneously when each radio button is clicked.