Question

我在页面的一个段落上放置了（CSS）“更多”切换按钮。当我单击“阅读更多”时，多余的文本会出现在下面的段落中。我如何使下面的内容更向下？我还没有尝试过任何东西，因为我不知道该怎么做。任何帮助表示赞赏。

以下是相关代码：

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state~.read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked~.read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid rgba(0, 162, 38, 0.55);
  border-radius: .25em;
}

<div class="cultureHist"></div>
<div class="descriptionText">
  <h4>Where History Abounds</h4><br><br>
  <input type="checkbox" class="read-more-state" id="histAbounds">
  <p class="read-more-wrap" style="text-align: left">Tishomingo County was once the Marriage Capital of the South. Numerous couples came to the old Tishomingo County Courthouse to “tie the knot,” due to marriage license requirements being so easy. Tishomingo County is extremely rich with historical and
    cultural stories. Historical homes, the Battle of Iuka and other Civil War skirmishes.<span class="read-more-target"> If you are a history buff, you'll want to see our historical cemeteries, museums, stately old buildings and historical markers that celebrate the romance and keep the memories of a bygone era alive. The resources found on these pages are only glimpses into our rich history and illustrate not only why people of many cultures converged here, but how they changed the world.</span></p>
  <label for="histAbounds" class="read-more-trigger"></label>
</div>
</div>
</div>


<div data-aos="fade-zoom-in" data-aos-offset="0" data-aos-delay="300" data-aos-duration="1000">

  <div class="animationContainer">
    <div class="retirement"></div>
    <div class="descriptionText">
      <h4>Your Retirement Haven</h4><br><br>Tishomingo County is one of the best places to retire. According to Kiplinger, Mississippi ranked #4 as the most tax-friendly state for retirees. Retirees do not pay income tax on retirement income. Social security
      income is not taxed, regardless of total income.</div>
  </div>
</div>

如何使“阅读更多”内容下推页面内容

0 个答案: