Jquery 显示/隐藏内容

我需要这个toogle函数的帮助。如何更改名称，例如：当“框”显示时，仅显示显示；当“框”隐藏时，仅显示隐藏

现在，“显示/隐藏”将同时显示在“显示”和“隐藏”上

$（文档）.ready（函数（）{
$（“.show”）。单击（函数（）{
$（“.apaansi”）.toggle（）；
});
});
.box{
边框：1px实心#dedede；
填充：1%；
}

搜寻
您只需使用计数器即可

这是一把小提琴：

$counter=0；
$（“.show”）。单击（函数（）{
如果（$counter%2）
{
$（this.html（'Hide'）；
}否则{
$（this.html（'Show'）；
$counter=0；
}
$counter++；
$（“.apaansi”）.toggle（）；
});

$（文档）.ready（函数（）{
$（“.show”）。单击（函数（）{
$（“.apaansi”）.toggle（）；
$（'.apaansi'）.css（'display'）=='none'？$（this.text（'Show'）：$（this.text（'Hide'）；//基于css显示隐藏
});
});
.box{
边框：1px实心#dedede；
填充：1%；
}

搜寻
当我添加这些代码时，切换将不起作用。当我再次添加上一个JQuery时，它工作了，但是显示和隐藏没有改变。我没有看到任何错误，但是当我只是复制粘贴代码时，toogle根本不工作。你共享的链接工作正常，不知道为什么它在我的链接上不工作。@RendyJuvi是的。。。你能检查一下控制台吗？控制台？我不知道那是什么。我还是这方面的新手。所以sorry@RendyJuvi在浏览器上单击鼠标右键，然后单击“检查图元”并转到“控制台”选项卡
   $counter = 0;
   $(".show").click(function(){
        if($counter % 2)
        {
          $(this).html('Hide <i class="fa fa-chevron-down"></i>');
        }else{
          $(this).html('Show <i class="fa fa-chevron-right"></i>');
          $counter = 0;
        }
        $counter++;
        $(".apaansi").toggle();
    });