How to use CSS to achieve the function of switching display text?

AWEI 0
Viewed 31

I have two radio type menus. Currently, I can select different payment methods to open the corresponding block, but I don’t know how to implement the Precautions content below. Can I switch along?

For example: Click on cash payment, the text in Precautions is the notes for red cash payment, click on credit card payment, the text in Precautions is the notes for blue credit card payment, and

I hope someone can share it. Can it be done? Or can it only be done by relying on JS? If it is done by JS, how should it be written? Thanks for watching my question, hope it helps. thanks

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>

jquery javascript css html
1 Answers

You can create some markup in JS that you can then insert into your parent UL class (which I've named a generic '.tips'). Then, each time you click either the cash or credit option, the inner html of that UL gets dynamically added.

const cashParent = document.querySelector(".cash-parent");
const creditParent = document.querySelector(".credit-parent");
const tipsList = document.querySelector(".tips");
const tipsListCreditItems = `
  <li>Info about credit items here</li>
  <li>Another bit of info for credit items here</li>
  <li>Add more here, etc.</li>
`;
const tipsListCashItems = `
  <li>Cash items here</li>
  <li>Some more info for cash items here</li>
  <li>Add more here, etc.</li>
`;

const handleCreditParentClick = () => {
  tipsList.innerHTML = tipsListCreditItems;
}

const handleCashParentClick = () => {
  tipsList.innerHTML = tipsListCashItems;
}

cashParent.addEventListener("click", handleCashParentClick);
creditParent.addEventListener("click", handleCreditParentClick);
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 .tips {
  display: block;
}

.wrap .tips.credit {
  color: blue;
}

.wrap .tips.cash {
  color: red;
}
<label class="radio">
  <input type="radio" value="" name="text">
  <div class="radio-list cash-parent">
    <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 credit-parent">
    <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="tips">
  </ul>
</div>

offoffoff0
Related