使用按钮和 .active css 类显示显示/隐藏内容

Question

我正在尝试在 wordpress 网站上创建一个推荐部分，其中有一个“扩展”按钮来显示完整的推荐报价。我希望按钮中的文本在单击后更改为“折叠”。我还需要向 div 包装器添加一个类，以便在按钮处于活动状态时实现自定义 css 样式。我需要这个粘贴三遍。问题是它在第一次推荐之后就失败了。

我使用下面的代码进行了此操作，它重复了三次（用于三个不同的推荐），并且它适用于基本的 html 文档。但是当我通过粘贴代码在 wordpress 站点中实现它时，只有第一个推荐完全有效。另外两个确实显示/隐藏了我的内部 div 元素，但它们不会插入 .active 类或将按钮的文本更改为“折叠”

第二个推荐都给出了一个

“Uncaught TypeError: Cannot set property 'innerHTML' of null” 在控制台中。

因此，例如，这是我想要展示的三分之二的推荐。我必须更改它们的 ID 以避免 javascript 冲突。

function showhide() {
  var content = document.getElementById('hidden-content');
  var wrap = document.getElementById('testimonial-wrap');
  var btn = document.getElementById('button1');

  if (content.style.display === 'none') {
    content.style.display = 'block';
    wrap.style.background = 'grey';
    btn.innerHTML = 'COLLAPSE';
    wrap.classList.add('active');
  } else {
    content.style.display = 'none';
    wrap.style.background = 'white';
    btn.innerHTML = 'EXPAND';
    wrap.classList.remove('active');
  }
}

function showhide2() {
  var content2 = document.getElementById('hidden-content2');
  var wrap2 = document.getElementById('testimonial-wrap2');
  var btn2 = document.getElementById('button2');

  if (content2.style.display === 'none') {
    content2.style.display = 'block';
    wrap2.style.background = 'grey';
    btn2.innerHTML = 'COLLAPSE';
    wrap2.classList.add('active');
  } else {
    content2.style.display = 'none';
    wrap2.style.background = 'white';
    btn2.innerHTML = 'EXPAND';
    wrap2.classList.remove('active');
  }
}

<div id="testimonial-wrap" style="background-color: white;">
  <div id="testimonial">
    above testimonial content
    <div id="hidden-content" style="display: none;">
      <p>"hidden content”</p>
    </div>
    <button id="button1" onclick="showhide()">EXPAND</button>
  </div>
</div>


<div id="testimonial-wrap2" style="background-color: white;">
  <div id="testimonial">
    above testimonial content
    <div id="hidden-content2" style="display: none;">
      <p>"hidden content.”</p>
    </div>
    <button id="button2" onclick="showhide2()">EXPAND</button>
  </div>
</div>

Answer 1

我认为这就是您要寻找的。您可以使用 jQuery 和少量代码更轻松地完成此操作。

我没有使用display: none，因为我想将过渡添加到动作中。 （转换不适用于display: none）

$(document).ready(function() {
  $(".toggle-button").on("click", function() {
    $(this).closest(".testimonial-wrap").toggleClass("active");
  });
});

.testimonial-wrap {
  background-color: #C1C1C1;
  padding: 5px;
  margin-bottom: 10px;
}

.testimonial-wrap.active {
  background-color: #0095FF
}

.hidden-content {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-out;
}

.active .hidden-content {
  height: 100px;
  visibility: visible;
  transition: all 0.5s ease-in;
  background-color: rgba(0, 0, 0, 0.5);
}

button {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-wrap">
  <div id="testimonial">
    <p>above testimonial content</p>
    <div class="hidden-content">
      <p>"hidden content”</p>
    </div>
    <button id="button1" class="toggle-button">EXPAND</button>
  </div>
</div>


<div class="testimonial-wrap">
  <div id="testimonial">
    <p>above testimonial content</p>
    <div class="hidden-content">
      <p>"hidden content.”</p>
    </div>
    <button id="button2" class="toggle-button">EXPAND</button>
  </div>
</div>