I am working on two radio type menus to allow users to select different payment methods which will reveal corresponding information. However, I am facing a challenge in implementing the Precautions content below. Can someone guide me on how to achieve this functionality?
Here is an example of what I am trying to do: When a user clicks on cash payment, I want the Precautions section to display notes related to cash payments. Similarly, when they click on credit card payment, the Precautions section should show notes for credit card payments.
If anyone has experience with this, please share your insights. Is it possible to accomplish this without relying solely on JavaScript? And if JS is required, how would you suggest writing the code?
input {
display: none;
}
.radio {
display: flex;
flex-direction: column;
align-items: center;
}
.radio .radio-list {
display: flex;
align-items: center;
}
.radio .radio-list .radio-sign {
position: relative;
display: inline-block;
text-indent: -9999px;
width: 20px;
min-width: 20px;
height: 20px;
border-radius: 50vh;
border: 2px solid #7f7f7f;
background: #fff;
margin-right: 8px;
}
.radio .radio-list .radio-sign:before {
content: "";
width: 10px;
height: 10px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50vh;
display: none;
}
.from-box {
display: none;
padding: 20px;
background-color: #ccc;
border: 1px solid #222;
border-radius: 6px;
}
input:checked~.from-box {
display: block;
}
input:checked~.radio-list .radio-sign::before {
display: inline-block !important;
}
.wrap {
margin: 10px auto;
padding: 30px;
background-color: #ccc;
text-align: center;
}
.wrap h2 {
font-size: 20px;
font-weight: 900;
margin-bottom: 20px;
}
.wrap .cash_tips {
display: block;
color: red;
}
.wrap .credit_tips {
display: none;
color: blue;
}<label class="radio">
<input type="radio" value="" name="text">
<div class="radio-list">
<figure class="radio-sign">radio-sign</figure>
<p>Pay by cash</p>
</div>
<div class="from-box">
Pay by cash info...
</div>
</label>
<label class="radio">
<input type="radio" value="" name="text">
<div class="radio-list">
<figure class="radio-sign">radio-sign</figure>
<p>credit payment</p>
</div>
<div class="from-box">
credit payment info...
</div>
</label>
<div class="wrap">
<h2>Precautions</h2>
<ul class="cash_tips">
<li>1.Cash Payment Notes Clause</li>
<li>2.Cash Payment Notes Clause</li>
</ul>
<ul class="credit_tips">
<li>1.Cash Payment Notes Clause</li>
<li>2.Cash Payment Notes Clause</li>
</ul>
</div>