使用不在同一个 div 中的按钮隐藏/显示 div

Question

我正在为我的 wordpress 网站使用 elementor，我希望在第一个 div（部分）中有一个按钮，用于控制是否显示第二个单独的 div（部分）。 我尝试使用复选框黑客，但仅当复选框作为内容位于 div 中时才有效https://css-tricks.com/the-checkbox-hack/

有没有使用 CSS 甚至 javascript 的解决方案？ 如果您建议我使用 javascript，我将放入我的 function.php 文件中，因为我是 javascript 初学者，请您将我必须实现的所有功能写入我的 function.php 文件中。

基本上它的意思是：

<div>button</div> <div>content to show and hide on click on the button</div>

最好的问候，克莱门特

Answer 1

您可以使用 Jquery：

1-给你的 DIV 加上一个 id

<div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>

2-调用jquery来显示

$("#btn_show").click(function(){
 $("#show").show();
  //or
 $("#show").hide();
});

和 jquery 你可以用 CDN 调用它

<script src="https://code.jquery.com/jquery-3.6.0.js"</script>

Answer 2

在没有任何库的 javascript 中，这可能非常简单，但您需要在按钮上放置一个 id。

<div id="myButton">button</div> 
<div id="myDiv">
  content to show and hide on click on the button
</div>

然后你只需添加一个这样的脚本部分：（它只需要在你的 div 和 DOM 中的按钮之后）

<script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => {
  myDiv.classList.toggle('visible'):
});
</script>

最后，你需要一个这样的 css：

.visible {
  display: none;

}

Answer 3

感谢您的所有回答！ 这里我使用的是：

<button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() {
var x = document.getElementById("myDiv");
if (x.style.display === "block") {
    x.style.display = "none"; } 
else {
x.style.display = "block";}} 

最好的问候，克莱门特