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

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 >
  <input type="radio" value="" name="text">
  <div >
    <figure >radio-sign</figure>
    <p>Pay by cash</p>
  </div>
  <div >
    Pay by cash info...
  </div>
</label>

<label >
  <input type="radio" value="" name="text">
  <div >
    <figure >radio-sign</figure>
    <p>credit payment</p>
  </div>
  <div >
    credit payment info...
  </div>
</label>


<div >
  <h2>Precautions</h2>
  <ul >
    <li>1.Cash Payment Notes Clause</li>
    <li>2.Cash Payment Notes Clause</li>
  </ul>

  <ul >
    <li>1.Cash Payment Notes Clause</li>
    <li>2.Cash Payment Notes Clause</li>
  </ul>
</div>

CodePudding user response：

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 >
  <input type="radio" value="" name="text">
  <div >
    <figure >radio-sign</figure>
    <p>Pay by cash</p>
  </div>
  <div >
    Pay by cash info...
  </div>
</label>

<label >
  <input type="radio" value="" name="text">
  <div >
    <figure >radio-sign</figure>
    <p>credit payment</p>
  </div>
  <div >
    credit payment info...
  </div>
</label>


<div >
  <h2>Precautions</h2>
  <ul >
  </ul>
</div>