Javascript 使单独的切换按钮一起工作

我有一些信息容器，在开始时显示一些信息，当单击“关闭”时，它们应该隐藏起来，并且应该显示一个信息按钮，使它们在单击时再次显示。整个页面都有类似的信息字段和按钮。我只想显示和隐藏点击的，而不是所有的

有人知道如何实现这个功能吗。这是我的密码

<div class="it-con">
   <div class="mess-text">
       <span class="x-btn">&#10005;<br></span>
       <h4>Headline</h4>
       <br>
       <p>Some Info</p>
   </div>
   <div class="toggle">
        <div class="inf-btn">Info</div>
   </div>
</div>

但不知道如何使inf btn显示。也不知道如何使混乱的文本重新出现

非常感谢你的帮助

---

：）

您只需制作一个按钮即可切换可见性，如下所示：

<div class="it-con">
   <div class="mess-text">
       <span class="x-btn">&#10005;<br></span>
   </div>
   <div class="toggle">
       <h4>Headline</h4>
       <br>
       <p>Some Info</p>  
   </div>
</div>

你想要什么

代码：

$（.inf btn”）。单击（函数（e）{
$（this）.sides（'.mess text'）.slideToggle（）；
$（this）.text（函数（i，text）{
返回文本==“隐藏信息”？“显示信息”：“隐藏信息”；
});
})

隐藏信息
大字标题


一些信息

隐藏信息
大字标题


其他一些信息

这实际上是个好主意。但实际上，我有时有两个按钮，只要文本不可见，它们就应该一直可见。我想它们应该在文本容器之外。我不知道如何使外部按钮使文本容器重新出现。这些按钮永远不会与此代码不匹配，它们位于文本包装器的外部。按钮在文本上调用slideToggle（）函数，使其在按钮始终可见时显示和取消显示。发布的两种解决方案都完全符合您的描述。我想我还需要此按钮来切换文本。显示文本时，按钮应不可见。当文本容器不可见时，我希望按钮可见。但是如果隐藏按钮不可见，如何隐藏文本？

<div class="it-con">
   <div class="mess-text">
       <span class="x-btn">&#10005;<br></span>
   </div>
   <div class="toggle">
       <h4>Headline</h4>
       <br>
       <p>Some Info</p>  
   </div>
</div>

$(".it-con .x-btn").click(function(e){
    info = $(this).parent().next('.toggle')
    info.toggle();
    if (info.is(":visible")) {
      $(this).html('HIDE');  
    } else {
      $(this).html('SHOW');    
    }
})